Tips CSS/HTML please, mobile layout

Salvation of problems by performing my single mobile column layout to do what I want.  CSS here

The bare, simplest bones, looking for solutions from beginner I can understand, explain

1. What is now the header and the wrapper to top - align in the body?

2. why my nav is not centered? Not sure that all of the stuff I've tried are necessary to have there. Don't really understand the process of sup/child selectors...

3 - the first shoe, see how the price is back just below the div with the lines?  (#BG_heels_AnkleStrap) Struggling to make the other game 4.

4 - What is the most simple to have 'Add to Cart' text without point of bullet? Had outside the AMT originally, but IDK how a style link. Tried to put in a div too... (now commented out), but it was a mess.

5. I have a lot of neg values. here... is this normal coding?

6 - ago probably thinner / more-simplified ways to build it. Suggestions appreciated.

1. Add a class in the following

class = "ir"> shoes Sally

and style

. IR {display: none ;}}

2. Add to the style sheet

NAV ul {}

margin: 0;

padding: 0;

list-style-type: none;

}

3 - 6 too much question at a session. Please refer to Adobe support & resources Forum

Tags: Dreamweaver

Similar Questions

  • How and in which files that I can combine my computer policy in the html for my captivate project file? I know that I need to make changes on the css, HTML, and I need to add fonts to a folder, but do not know where please help

    How and in which files that I can combine my computer policy in the html for my captivate project file? I know that I need to make changes on the css, HTML, and I need to add fonts to a folder, but do not know where please help

    https://forums.Adobe.com/servlet/JiveServlet/showImage/2-7496573-757050/pastedImage_0.PNG

    This is an image of the files I see

    If the police will not be on the end user's computer, it won't make a difference.

    You should try to include a web font, but you cannot use those during the creation of course, so when you publish or correct fonts you have alignment issues.

  • Redirect error to mobile layout

    Hello

    I have a problem with my site. I made a mobile model, but on my laptop I don't see, all I see is the desktop version. My site is http://trgovina-stella.hr . I check all my links on the site are for the mobile layout. Help, please!  Thank you!

    Hello

    Please take a look at this topic,

    Re: Muse does not redirect to the tablet website?

  • I can switch between the code sheet and css html, but I would like to see them both at the same time as well as the design window. Right now and can see rather the design and code html or design and css. How can I arrange to see all at the same time, of

    Hello

    My name is Ellie and I am new to Dreamweaver.

    I can switch between the code sheet and css html, but I would like to see them both at the same time as well as the design window. Right now and can see rather the design and code html or design and css. How can I arrange to see everything at the same time, design, HTML and CSS?

    Thank you

    It ends up something like that...

  • Muse do not publish new page in site on Mobile layout map

    I am updating a site for a client and I had to add a new page to replace a previous page in the mobile layout no matter what I try his watch still the old version of the page that I also tried to create a new temporary site and its still do

    Accommodation on Business Catalyst? If so, sitemaps are automatically generated every 24 hours, so may take a few hours to take effect.

  • Preview in the browser is displayed in the mobile layout

    I'm looking at several different themes in muse and previewing the in my browser. I don't know which setting I might change but now whenever I select "show an overview of the site in the browser", it opens in firefox, but in the mobile layout. Having the same problem with several different themes. What have I done?

    Muse will use the configuration of the default browser on your computer. So if you change the browser by default then overview Muse will open the browser you select as default.

    Thank you

    Sanjit

  • Checkerboard to fluid, I've hidden 2 < div > mobile layout. How do I find them?

    Checkerboard to fluid, I've hidden 2 < div > mobile layout. How do I find them?

    Hi howie.c.design,

    Just to clarify this point a bit more for you:

    (1) for the class trained elements (that is, you spent a class name while inserting)-> DW Adds a class like 'hide_tablet', 'hide_mobile' and 'hide_desktop' for each of the respective provision.

    for example:

    This is the content of the div layout "div".

    That is why by deleting just the same source code will make the visible element in the respective display.

    (2) for the ID-driven elements (that is to say you had a code name while inserting)-> DW sets the property to display for this selector in a particular window as none.

    IE as shown on the image of "sally_em" above #featurest a the display property set to none.

    This property of compensation will be show the item.

    We know it's good for the ideal workflow and we are working on the provision of an interface allowing to achieve the same through the user interface.

    It will be available soon.

  • Image with HTML and CSS placement - please help I'm a newbie

    Hello
    The CSS code for my entry page/index.html page is attached. Some great people helped me fix the css code so that the picture fills the space properly and looks the same in IE and Firefox. So now I have the photo in the right area, but in doing so, my text has fallen out of the area on the inside... EEEEEK
    Thank you!
    the Web site address so it can be accessed: www.jonasphoto.com

    Steve...
    Look at the site entrance page, and you will see that the news of the site entry are now down below...
    I like to keep the text within the borders
    Get closer... Thank you

  • Need help with mobile layout

    Hello. Need help with my layout sensitive, using straight lines only html5 and css3 that I can understand and explain a novice level please - without any restart. Desktop and mobile are in a single html doc. The desktop version is 'ok '.

    current version (6_2)

    Try to match these mobile Office layouts

    On the mobile version:

    -Impossible to get the buttons nav blocks, vertical text button Align, and align the image of the product (square pictures) to the Center. (margin: auto; does not work)

    I used heights in the header because I'll have code for desktop, mobile and tablet in the CSS so it changes (and do not know how to support better). Also need to Add a link to the logo image background in header.

    Thanks in advance!

    TheOriginal150mph wrote:

    Hello. Need help with my layout sensitive, using straight lines only html5 and css3 that I can understand and explain a novice level please - without any restart. Desktop and mobile are in a single html doc. The desktop version is 'ok '.

    current version (6_2)

    Try to match thesemobile Officelayouts     

    On the mobile version:

    -Impossible to get the buttons nav blocks, vertical text button Align, and align the image of the product (square pictures) to the Center. (margin: auto; does not work)

    Commenting on just a habit of property changing the css if you have defined it for the desktop version. Your nav elements are not vertically Center because you have a bottom padding set on them for the office, there are only changes for mobile in your css media query.

    .main-nav a {}

    display: block;

    text-decoration: none;

    / * padding-bottom: 15px;   */

    Padding: 12px 0;

    }

    Change the properties for the .product-images for mobile boxes: you have float attached to them for the desktop version and which cascade down to the mobile version, unless you change in the media query:

    .product-image {}

    float: none;

    Width: 50%;

    margin: 0 auto 20px auto;

    }

    As I mentioned in one of my posts related to your project, you will probably have to make your product images a bit larger. They fill the area once they form a column to width of 768px screen or you could resist transform them to one column until a little more by using a media query extra set at a narrow screen width to evoke this action

  • Mobile, layout, aligned to the left

    I created a website using Adobe Muse and transferred the site to the ftp server. The site is online and is designed when looked at through a desktop computer. But when the same site is accessed from a mobile phone, the entire page is aligned to the left and there is a shift to the right. I even made a model of phone and the same uploaded to the ftp server and the problem persists. I've google a lot and html inserted the code in the metadata to make the site Center but in vain. Nothing works . I have a tight schedule and would be really grateful for any help fast.

    Hello

    If available to phone appears in the phone and still aligned left her and then go to the mode of the layout design phone page and make sure that it has no object is placed outside the area of the browser. (you can select all to check this. ctrl + a or command-A)

    If this is not the case please share the site URL file or .muse with us make the look.

    Concerning

    Vivek

  • Help for newbie with ul CSS Navbar please

    Hi, I followed a tutorial and everything on my site worked fine so far except for one thing. When I go to a different screen resolutions page changes as I want it, but the buttons on my horizontal navigation bar remains fixed relative to the page. Any help would be welcome

    Code is pasted below for HTML and CSS

    Thank you

    HTML

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
    " < html xmlns =" http://www.w3.org/1999/xhtml ">
    < head >
    < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
    < title > Untitled Document < /title >
    < link href = "thrColLiqHdr.css" rel = "stylesheet" type = "text/css" / > <!-[if IE] > "
    < style type = "text/css" >
    / * place patches css for all versions of Internet Explorer in this conditional comment * /.
    .thrColLiqHdr #sidebar2, .thrColLiqHdr #sidebar1 {padding-top: 30px ;}}
    .thrColLiqHdr #mainContent {zoom: 1; padding-top: 15px ;}}
    / * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.
    < / style >
    <! [endif]-->
    < / head >

    < body >

    < div id = "container" >
    < div id = "header" >
    <!-end #header->
    < img src = "images/logo combined.jpg" width = "800" height = "139" / >
    < ul >
    < li > < a href = "#" > home < /a > < /li >
    < li > < a href = "#" > about us < /a > < /li >
    < li > < a href = "#" > food < /a > < /li >
    < li > < a href = "#" > beer & amp; Wine < /a > < /li >
    < li > < a href = "#" > contact us < /a > < /li >
    < li > < a href = "#" > links < /a > < /li >
    < /ul >
    < / div >
    < div id = "sidebar1″" >
    Sidebar1″ < h3 > < / h3 >
    < p > the background color on this div will only show for the length of the content. If you want a line instead, place a border on the left side of the #mainContent div if div #mainContent will contain more content than the div. of #sidebar1 < /p >
    < p > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. < /p >
    <!-end # sidebar1″--> < / div >
    < div id = 'sidebar2' >
    < p > < img src = "images/logo blue.jpg" width = "104" height = "125" / > < / p >
    < p > welcome on the site of the Wheatsheaf Inn Brading.
    The building has been approved for consumption of alcohol since the beginning of the 18th century and today it is still an attention of the local community, as suitable for a traditional pub. < br / >
    In addition, we strive to provide a wide range of beers and wines, including all three time English beers and a diverse but significantly to the price of the wines, as well as freshly cooked food that moves with the seasons and, as much as possible, produce uses are grown or high on the island. < /p >
    < p > < / p >
    <!-end #sidebar2-> < / div >
    < div id = "mainContent" >
    The Wheatsheaf Inn, Brading < H1 > < / h1 >
    < p > Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. Donec and ipsum and vehicula nonummy sapien. Suspendisse potentialit. < /p >
    Heading level H2
    < p > Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >
    <!-end #mainContent--> < / div >
    <!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >
    < div id = "footer" >
    footer < p > < /p >
    <!-end #footer--> < / div >
    <!-end #container--> < / div >
    < / body >
    < / html >

    CSS

    @charset "utf-8";
    {body
    margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
    padding: 0;
    text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.
    Color: #000000;
    do-family: Arial, Helvetica, without serif.
    do-size: 100%;
    background-color: #660000;
    }
    UL {}
    margin: 0px;
    padding: 0px;
    float: none;
    }

    #container {}
    Width: 100%;
    text-align: center;
    do-size: 80%;
    background-color: #FF9;
    }

    / * MainContent tips:
    1. the space between the mainContent and framed is created with the left and right margins on the mainContent div.
    2. to avoid falling of float at a resolution of 800 x 600 minimum supported, within the mainContent div elements must be 300px or smaller (including images).
    3. in the Internet Explorer conditional comment below, the zoom property is used to give the mainContent "hasLayout". This avoids several specific IE bugs.
    */
    #mainContent {}
    margin: 0 24 0 23.5%; / * left and right margins on this div element creates the two outside columns on the sides of the page. No matter the amount of content contain the sidebar divs, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill in the spaces of the sidebar when the content in each side bar ends. */
    }
    #header {}
    background-color: #660000;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    background-repeat: no-repeat;
    background-position: right top;
    }
    #header ul {}
    background-color: #036;
    background-image: url(images/Nav%20Bar%20Top.jpg);
    background-repeat: repeat-x;
    border-bottom-color: #FF0;
    border-bottom-style: solid;
    border-bottom-width: thin;
    padding-left: 155px;
    list-style-type: none;
    overflow: auto;
    margin: 0px;
    }
    #header li {}
    float: left;
    do-size: 120%;
    }
    #header Li a {}
    display: block;
    text-decoration: none;
    padding-top: 8px;
    padding-right: 25px;
    padding-bottom: 8px;
    padding-left: 25px;
    left margin: 0px;
    }

    / * Tips for sidebars:
    1. as we work in percentages, it is best do not use the lateral pads on the side bars. It will be added to the width for browsers compatible standards creating a real unknown width.
    2. the space between the wall of the div and the items it contains can be created by placing a margin left and right on these items as seen in the rule "#sidebar1 p".
    3. Because Explorer calculates the width after that the parent element is rendered, you can sometimes run into unexplained bugs with percentages of columns. If you need more predictable results, you can choose to change the columns of pixels in size.
    */
    {#sidebar1}
    float: left; / * This item must precede in the source order of any element you want it positioned next to * /.
    Width: 22%; / * because this element is floating, it takes a width * /.
    Background: #660000; / * the background color will be displayed for the length of the content of the column, but no further * /.
    Padding: 15px 0; / * upper and lower padding create a Visual space within this div * /.
    }
    {#sidebar2}
    float: right; / * This item must precede in the source order of any element you want it positioned next to * /.
    Width: 23%; / * because this element is floating, it takes a width * /.
    Background: #036; / * the background color will be displayed for the length of the content of the column, but no further * /.
    Padding: 15px 0; / * upper and lower padding create a Visual space within this div * /.
    }
    #sidebar1 p. #sidebar1 h3, #sidebar2, #sidebar2 h3 {}
    margin-left: 10px; / * the left and right margins should be to all of the items that will be placed in the side columns * /.
    margin-right: 10px;
    color: #FF0;
    make-weight: bold;
    }

    #footer {}
    padding: 0 10px; / * This filling is the alignment to the left of the items in the div that appear above him. */
    Background: #660000;
    }
    #footer p {}
    margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
    padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
    }

    / * Various classes for reuse * /.
    .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
    float: right;
    left margin: 8px;
    }
    .fltlft {/ * this class can be used to float an element in your page, the floating element must precede the element it should be next to the page left. * /}
    float: left;
    right margin: 8px;
    }
    .clearfloat {/ * this class must be placed on an element div or break and should be the last item before the closing of a container must contain its child floats entirely * /}
    Clear: both;
    height: 0;
    font size: 1px;
    line-height: 0px;
    }
    a {}
    color #FF0;
    color: #FF0;
    make-weight: bold;
    }
    H1 {}
    color: #036;
    font size: 250%;
    }

    I also did what did Martin, wrap the list in a new div with an ID of #navbar.  If you give it a width in px and auto margins, the Center navigation bar.

    Here's what has worked, however, it is very difficult to see without having access to the images you used as background images called via the stylesheet.

    CSS:

    {#navbar}

    Width: 980px;    / * change width as needed * /.

    margin: 0 auto;

    }

    Another option would be to take the navigation bar of the header div and create its own container under the header div and try that style instead.  At the moment he is forced by the rules in the #header.

    If you cannot fix it, please download the files to a server and provide a link - it is the only way that people can help troubleshoot, especially if the images are involved in the design.

  • What, in your opinion would be the best option. (new css &amp; html)

    I'm sorry if this makes no sense, but I wanted to know what you thought would be the best way to do it. It's for an assignment and I am completely helpless as to how I would like to address the issue.

    Basically, I need to create the image on my Web site. I thought to add just like an image, but that looks sticky, unless I have the resolution.

    This is a menu for a local pub. We learn only so please be patient with me...

    menuprices.jpg

    funkychicka wrote:

    I appreciate all the help

    I have never been able to "get" html... I get more than I did a week ago, but it's just how the news, I am in this...

    I tried both ways, and the only thing I keep coming back to the table... I think that as soon as I get more cluey with names and what - what mean, I could try the reverse... but for now

    This is what I have and that's where I'm stuck.

    I can not get something where the blue arrow is on the right side, everything I try going to the arrow on the left..., why would it be?

    Who is? I tried different things, it just does not work, so I don't know what Miss me

    You need to table 'float' left or right using css for the side-by-side tables (see the example of code/css in my previous post)

  • I deleted my phone layout and the site is always redirected to mobile layout during the export

    I deleted available phone my layout of the muse and re-exported the html code. The site is well on office, but it will not come up on top of the phone. The page not found error.

    Hello

    Please share the url of the site with us to test the object.

    Also delete cookies of the phone and then try to visit the site. Make sure that you type only the domain not http://domain.com/phone.

    Respect,

    Vivek

  • Reduced Mobile layout

    Hello

    When the google bot parses a url in the desktop version which is not available in the configuration of the phone, google thinks that's not mobile optimized. But the desired sound.

    Is this a solution to put a rel = "alternate" tag at the head of this specific pages, so what google has a redirect?

    something like this:

    "" <link media= "only screen and (max-device-width: 370px)" rel= "replacement" href= "http://www.xxx/phone/index.html" / > .


    What is contraproductive because google recognizes that it is redirected to a url with a different content?


    Thanks for your response

    Please visit these links for explanation:

    https://forums.Adobe.com/thread/1755393?start=0&TSTART=0

    Thank you

    Sanjit

  • In CSS HTML file

    Hello

    I realize an emailing and I wish that the in my HTML file CSS, possible is it?

    Thank you

    Hello

    I believe you are trying to create the Newsletter in Muse. Unfortunately the Muse file create separate HTML and CSS.

    Please refer to the link below for more details

    https://forums.Adobe.com/thread/1330865

    Concerning

    Vivek

Maybe you are looking for

  • support for windows nt backups

    Made a backup nt to support windows server 2003 and I selected the root folder. I'm trying to restore on server 2008r2 and some files are missing. I can see that the file size is bigger than the dat restored a few GB. Is there something I can do?

  • I try to install the updates and still error Code OX643

    I have a XP system and I try to update each time I get an error Code OX643 I'm just an average user nothing special on my computer. Help, please The system says a security update for Microsoft .NET Framework 1.1 SP1 on Windows XP 2008 x 86 (KB2656353

  • Realtek PCI card driver crashes

    I was do bluescreen and I crashes quite regularly on my new laptop. Unfortunately, they started appearing just after the day 14 return period, so I'm stuck with the thing now. They seem to happen at random regardless of what I use the computer for. I

  • All files, Documents and images missing after restart.

    What happened:1 was trying to organize the files of 'Documents' and 'Photos' computer so dragged out of 'Owners' on the desktop.2. on another task, tried to open Word, but wasn't in response, had an error message so restarted computer.3. restart 'Doc

  • change a pl/sql block using "bulk collect.

    HelloI have a pl/sql block, short it slows...DECLARECURSOR CURUPDATE1 ISSELECT MF_TJ. UID_LOOF MF_TJWHERE MF_TJ. DTYP (SELECT CDOF MF_DOC_TYPEWHERE MF_DOC_TYPE. DTYP_CAT = 'xx')AND MF_TJ. LINE_TYP IS SET TO NULL;BEGINFOR T IN CURUPDATE1LOOPUPDATE MF_