Disorder by selecting the Div tags

Hello

Im trying to create a website portfolio for me but I'm having trouble with the selection of some div tags, I added to my page.

As you can see here the top right divtag is selected/clicked on illustrated by give it a blue box around it. It allows me to add a rollover image to which is what I try to do with home' 'info' and 'contact' buttons shown above right. However when I click on or around the div tags that hold these buttons I can't "select" them so that the blue box appears around the edge and therefore impossible to add the rollover image.

This is the encoding of the page, if it helps (I) normally work in the design window, I have not been taught in the coding

< ! 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 >

< style type = "text/css" >

{#wrapper}

float: none;

Width: 1500px;

margin: auto;

}

{#p1}

float: left;

height: 350px;

Width: 490px;

margin left: 15px;

top of the margin: 15px;

background-image: url(images/testp1.jpg);

}

{#p4}

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

margin left: 15px;

background-image: url(images/testp2.jpg);

}

{#p5}

Clear: none;

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

margin left: 15px;

background-image: url(images/testp3.jpg);

}

{#p6}

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

background-image: url(images/testp1.jpg);

}

{#p2}

background-color: #333;

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

background-image: url(images/testp2.jpg);

}

{#p3}

background-color: #999;

float: left;

height: 350px;

Width: 490px;

right margin: 15px;

top of the margin: 15px;

background-image: url(images/testp3.jpg);

}

{#p7}

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

margin left: 15px;

background-image: url(images/testp3.jpg);

}

{#p8}

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

margin left: 15px;

background-image: url(images/testp1.jpg);

}

{#p9}

float: left;

height: 350px;

Width: 490px;

top of the margin: 15px;

background-image: url (images/Logo1 - Tile.jpg);

}

{#home-btn}

background-color: #999;

float: left;

height: 30px;

Width: 30px;

margin-top:-715px;

margin left: 15px;

background-image: url(images/home.jpg);

}

{#contact-btn}

float: left;

height: 30px;

Width: 30px;

margin-top:-625px;

margin left: 15px;

background-color: #FF6;

background-image: url(images/contact.jpg);

}

{body

left margin: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

{#info-btn}

background-color: #09F;

float: left;

height: 30px;

Width: 30px;

margin left: 15px;

margin-top:-670px;

background-image: url(images/info.jpg);

}

< / style >

< / head >

< body >

< div id = 'wrapper' >

< div id = "p9" > < / div >

< div id = "p8" > < / div >

< div id = "p7" > < / div >

< div id = 'p6' > < / div >

< div id = "p5" > < / div >

< div id = "p4" > < / div >

< div id = 'p3' > < / div >

< div id = "p2" > < / div >

< div id = "p1" > < / div >

< / div >

< div id = "contact-btn" > < / div >

< div id = "info-btn" > < / div >

< div id = "Home-btn" > < / div >

< / body >

< / html >

Any ideas?

Cheers, Ryan

I normally work in the design window that I've not been taught in the coding

You will learn about code regardless if you make the effort. Start with these links:

http://w3schools.com/

http://www.csstutorial.NET/

DW assumes that you have knowledge of HTML & CSS code.

If you cannot or will not work with the code, you use the wrong tool.

For the non-codeurs, Adobe offers 2 other options: Adobe Muse & portfolio

Nancy O.

Tags: Dreamweaver

Similar Questions

  • Problem with the text in the div tag

    Hey there,

    the question that I have is that every time that I add text to a div tag and press 'enter' to start on another paragraph, the text on the first paragraph right guard moved down to about a paragraph. It happens in Dreamweaver and the browser when available is presented as a preview. I have included a few pictures below, please advise.

    First added text, which seems fine:

    Screen shot 2013-10-09 at AM 09.27.43.png

    But when I try to type the text after pressing "enter".

    Screen shot 2013-10-09 at AM 09.28.20.png

    I want the text to align to the top instead of from a paragraph down. Something like this (made in InDesign):

    Screen shot 2013-10-09 at AM 09.28.42.png

    I will include the code as well. When I select the div tag, it's what is highlighted in the code pane:

    < div id = "about6" >

    < p > Hey there < /p >

    < p > Hey there 2 < /p >

    < p > Hey there 3 < /p >

    < p > Hey there 4 < /p >

    < / div >

    A screenshot of the of type parameters for this div:

    Screen shot 2013-10-09 at AM 09.42.39.png

    Any help would be appreciated. Thank you.

    Paragraphs, titles etc. have legacy browser style rules.

    We can remove the style by adding rules to the top of the stylesheet

    * {

    padding: 0;

    margin: 0;

    }

    Even better is to include a CSS reset set of rules such as found here http://meyerweb.com/eric/tools/css/reset/

    By the way, please note that the use of identifiers will limit your fun by using style rules. You should not use ID unless needing a single login. In your case, I would use a class.

    Heights of adjustment are also going to strangle the natural flow of your document, especially if you intend to start on the drawings of fluid

    I hope this helps.

  • RH9: How can I get a CSS class or id defined style applies to Word or PDF output using the &lt; div &gt; tags?

    HR I wrote the following:

    This is the code-behind:

    The 'DivNote' CSS id is defined:

    However, when I generate the printed output, I get this:

    OutputImage_DivNote.jpg

    The style of the Note disappeared.

    I created a class = "Note"...:

    .. .and applied to the div tag with similar results, but with some of the style through:

    OutputImage_classNote.jpg

    The output HTML (.chm) seems, like the display of the preview (Ctrl + W).

    Your help is appreciated gracefully.

    Steve Roehrig

    In RoboHelp you map to a Word template or simply by selecting a CSS?

    I assume that you are by selecting a CSS and that the solution might be to map to a Word template, where you can map the. Note the style.

    Mapping to take word longer to set up the first time, but once done, you may be easier to get the desired results.

    See www.grainge.org for creating tips and RoboHelp

    @petergrainge

  • Image in the div tag

    Hello Dreamweavers.

    IM placing an image in my div tag and trying to style it with css, just to see what CSS has really cos Im new.

    IM adding the background image on the Center, but his only is not all the div, the leash of shadows

    on the left and right, so how can I place an image to occupy any of the div tag?

    Thank you.

    u2a.jpg

    I disagree with what Kenneth has recommended. He uses Flash to resize a background to the size of the viewport.

    Here are some tips:

    If you use a background image: url("..) (' / images/background.jpg "); in your CSS, the div will not develop to the background fill the div. So, if you have an image you want to show in a div (and don't want other images and text to sit on it, the best way to do so is not to set the image as a background.

    If you do not want the image in the background, and you want the div to be the same size as the image file, you must determine the dimensions of the image and make the height and the width to your equal to the div.

    The other way is to have your CSS resize your background to fill a div with a predefined size. If you follow these steps:

    {#mydiv}

    Width: 860px;

    height: 700px;

    background-image: url("..) (' / images/background.jpg ");

    background-size: 100% 100%;

    }

    This before you set the size of your div and make your background image to fill this div. If your background is close to the sheer size of the div, it will look like very well, but if you're stretching a background a lot smaller than your div, you can see a few grain. In this case, the use of Photoshop to aperture this context can be a good idea.

  • White space between the Div tags

    I use DW CS4.  I need to help, reducing the white space between the DIV tags  I have the white space between smaller gray line and my nav bar.  I see all the places where there are margins or padding.  Can anyone help?  Here's the code.  Thank you.

    < body bgcolor = "#CCCCCC" onload = "MM_preloadImages('..)." /_img/HOMEover.jpg ',' /_img/COMPANYover.jpg ','... / _img/PROJECTOR TSover.jpg ', '... CASE STUDIESover.jpg/_img / ','... / CONTACTUSover.jpg/_img ') ">"

    < div id = "container" >

    < div align = "left" >

    "" < p > < img src = "... / _img/Nute_Logo_tag_060612.gif" alt = "logo" name = "logo" width = "113" height = "74" hspace = "5" align = "absbottom" id = "logo" / > < / p >

    < / div >

    < div id = "header" > < / div >

    < div id = "content" > < / p >

    < table border = "0" cellpadding = "0" cellspacing = "0" >

    < b >

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'bluebar',", 1) ' onmouseover = "MM_nbGroup ('over', 'bluebar',","1)" onmouseout = "MM_nbGroup ('out')" > < img src = "... / _img/bluebarup.jpg" alt = "" name = "bluebar" width = "118" height = "15" border = "0" id = "bluebar" onload = "" / > < /a > < table >

    "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'Home',", 1) ' onmouseover = "MM_nbGroup ('more', 'Home','... / _img/HOMEover.jpg ',", 1) "onmouseout ="MM_nbGroup ('out')"" > < img src = ""... / _img/HOMEup.jpg ' alt = "Click HOME to go to the home page" name = "home" width = "115" height = "15" border = "0" id = "home" onload = "" / > < /a > < table >

    "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down"," group1', 'society', ", 1) ' onmouseover =" MM_nbGroup ('more', 'society', "..") " "(/ _img/COMPANYover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/COMPANYup.jpg "alt ="Click to go to our services COMPANY"name ="company"width ="122"height ="15"border ="0"id ="company"onload =" "/ > < /a > < table >"

    "< td > < a href =" "javascript:;" target = "_top" onclick = "MM_nbGroup ("down","Group 1","projects",", 1) ' onmouseover = "MM_nbGroup ('more', 'projects',..." "(/ _img/PROJECTSover.jpg', '', 1)' onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/PROJECTSup.jpg ' alt = 'PROJECTS click to see our projects' name = 'projects' width = "122" height = "15" border = "0" id = "projects" onload = "" / > < /a > < table > "

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ('down', "group1', 'studies',", 1) ' onmouseover = "MM_nbGroup ('more', 'studies,'... / _img/CASE STUDIESover.jpg',", 1) "onmouseout ="MM_nbGroup ('out')"> < img src ="... / _img/CASE STUDIESup.jpg "alt ="click on the CASE STUDIES to see examples of projects' name = "added" width = "150" height = "15" border = "0" id = "added" onload ="" / > < /a > < table >

    "" "" < td > < a href = "" javascript:; "target ="_top"onclick =" MM_nbGroup ("bottom", "group1', 'contactus',", 1) "onmouseover =" MM_nbGroup ('more', 'contactus','... / _img/CONTACTUSover.jpg ', ", 1)" onmouseout = "MM_nbGroup ('out')" > < img name = "contactus" src = "... / _img/CONTACTUSup.jpg" border = '0' alt = "" onload = "" / > < /a > < table >

    < /tr >

    "< / table > < img src =" "alt =" "name ="mainphoto1"width ="780"height ="264"id ="mainphoto1"/ >

    Thank you for all your help.  I solved it by adding a padding to my header (grey line).

  • Re-positioning of the div tags

    I am struggling with the div tags - I'm a newbie and have created an experimental web page.   However, everything was good until I started to add a spry menu.  the right tank moved and I can't figure out how to move left.  I tried positioning properties, but could not make it move!  Can anyone help.   I only have 2 divs "left_column" and "right_column" more container page is here

    http://Web.me.com/suethomo/site2/index.html

    This is how it looks before I mucked with the spry menu

    http://Web.me.com/suethomo/Site2a/index.html

    Thank you

    You didn't close the left_column so that the right column is in the left column. Add before

  • Should I format type within the div tag?

    I would like to know what is considered more acceptable:

    1. If I < p > in a < div > tag

    (- a) I could specify placement type by specifying the padding in the < div > tag where I could specify the margins for the < p > in the < div > tag.

    (b) I could specify the type of formatting in the < p > < div > tag.

    Which would be better?

    What is the preferred method in regard to < a > s in a < div > tag?

    Thank you!

    Mark

    Block: Occupies the entire available width, with a new line before and after (display: block ;))

    is a block element

    Inline: Takes only as much width as it needs and imposes no new lines (display: inline ;))   is an item online
    Useful resources:
    http://www.w3schools.com/CSS/css_howto.asp
    http://www.Dave-Woods.co.uk/index.PHP/block-and-inline-elements-part-one/
    http://www.maxdesign.com.au/presentation/inline/

    --

    Nadia

    Adobe® Expert community: Dreamweaver

    --------------------------------------------------

    Unique templates CSS | Tutorials | SEO articles

    http://www.DreamweaverResources.com

    --------------------------------------------------

    Book: Ultimate CSS reference

    http://www.SitePoint.com/launch/005dfd4/3/133

    ---------------------------------------------------

    http://Twitter.com/nadiap

  • spaces between the div tags

    I posted a few weeks on how to Center my site (that I had learned to design using all AP divs). I have redesigned my site now. Everything looks great in Firefox and Safari; but I'm having a problem with spaces between the div tags in Solution Explorer.

    Please see problem and source code here:
    http://www.renegadegraphics.biz/renegade_graphics_contact_us.htm

    There is a space under the banner div in the left sidebar. Can anyone help me please with this. I have the two fill and margins set to 0.

    Thanks in advance for your help.

    -Change

  • the div tags not included inside of div tags attributes

    I create a new site using DIVs for the first time. I have a div that includes a class called container for everything for the page. There is no error in the code.

    Inside of this, I have a div for the header, a main content div, and a div for the sidebar. Each also contains a class style. They are all certainly contained in the opening tags and closing div for the .container.

    However, the color that I've assigned to the background in the container div only applies to the header. Other class styles do not have assigned colors and display the page background color, not the color of the container.

    When I select the container div, it selects only the part of the page header and does not include the main content or the sidebar. I suppose that what I have done wrong is something simple, but have no idea how solve this.

    I hope I included enough information that someone will be able to help me with this. I spent an hour on this issue! :-)

    Thank you

    Marcy

    Are the sidebar and MainContent divs fluttered side-by-side like this?

    Header

    MainContent Sidebar

    If so, you are experiencing margin collapse caused by 2 floats in the parent container.  To resolve this problem, add overflow: hidden to the CSS of the parent container.

    . Container {}

    overflow: hidden;

    }

    Nancy O.

  • How to hide the div tags when the value inside is empty?

    I'm creating a tab bar using jQueryTabs.

    I want to hide a tab when the value inside is empty.

    It is perfectly feasible to hide the real on the ground when notting to show is, however, the tab is always in the tabs on top.

    Here is the code:

    as you can see in the tabs 4 and 5 I'm hidding values that are inside the field is it not there no. The tab is still there

     <script type="text/javascript">
    // BeginOAWidget_Instance_2140022: #jQueryTabs
    
    
    
    
              $(function() {
          $("#jQueryTabs").tabs({
                        event:"click",
                        collapsible: false,
                        selected:'0',
                        fx: { opacity: 'none', duration: 1 }
            }).tabs( "none" , 1 , false ); 
              });
    
    
    // EndOAWidget_Instance_2140022
           </script>
          <div id="jQueryTabs">
            <ul>
              <li><a href="#tabs-1">Description</a></li>
              <li><a href="#tabs-2">Specification</a></li>
              <li><a href="#tabs-3">Video</a></li>
              <li><a href="#tabs-4">Audio</a></li>
              <li><a href="#tabs-5">Downloads</a></li>
            </ul>
            <div id="tabs-1">
              <p><?php echo $row_Recordset1['Full_Description']; ?>
            </div>
            <div id="tabs-2">
              <p><?php echo $row_Recordset1['Specification']; ?></p>
            </div>
            <div id="tabs-3">
              <p><?php echo $row_Recordset1['Video']; ?></p>
            </div>
            <div id="tabs-4">
              <p><?php if (!is_null($row_Recordset1['Audio1'])) { ?><a href="<?php echo $file_wav.$row_Recordset1['Audio1']; ?>"><img src="files/Images/audio_image1.jpg" width="50" height="50" ></a><?php } ?></p>
            </div>
            <div id="tabs-5">
              <p><?php if (!is_null($row_Recordset1['Brochure'])) { ?>
              <a href="<?php echo $file_pdf.$row_Recordset1['Brochure']; ?>"><img src="files/Images/pdf_image1.jpg"></a>Brochure<?php } ?></p>
              <p><?php if (!is_null($row_Recordset1['User_Guide'])) { ?><a href="<?php echo $file_pdf.$row_Recordset1['User_Guide']; ?>"><img src="files/Images/pdf_image1.jpg"></a>User Guide<?php } ?></p>
            </div>
    
    

    RiaandSteve1 wrote:

    Thanks for your quick response,

    I tried this,

     

    ">

    I'm not able to click on the tab now, but he is always visible (in this case telling audio). I must be something to do with this code

  • Audio
  • above the actual div for the tab.  Do not know how to remove the tab

    Well Yes if you want to hide the tab too then you must surround the

  • tag in a similar way:

  • Audio
  • Image disappears in the Div tag

    Hello Dreamweavers.

    IM by selecting my image that is inside a div tag and when I hit the enter/return is disappeaers. What is going on?

    The reason Im doing this is to add a legend title to my image leaving a space under the pitcure.

    Thank you

    u2a5.jpg

    * {

    margin: 0;

    padding: 0;

    }

    {#box1}

    Width: 600px;

    }

    {.floatright}

    float: right;

    left margin: 12px;

    margin-top: 0px;

    margin-bottom: 9px;

    margin-right: 0px;

    padding-right: 0px;

    }

    < / style >

    < / head >

    < body >

    < div id = "box1" >

    < p > < br >

    Contrary to popular belief, is not simply random text Lorem Ipsum. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < br >

    Contrary to popular belief, is not simply random text Lorem Ipsum. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < /p >

    < p > < / p >

    < p >

    < img src = "_images/award.jpg" width = "240" height = "192" class = "floatright" > contrary to popular belief, Lorem Ipsum is not simply text randomly. " It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years. Richard McClintock, a Professor of Latin at the Hampden - Sydney College in Virginia, one of the more obscure terms latins, computer, looked up a passage of Lorem Ipsum and passing by her quote of the word literature classic, discovered the undoubted source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of the 'of Finibus Bonorum and Malorum"(The extremes of good and evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet... '. ", comes from a line in section 1.10.32 < /p >

    < / div >

    < / body >

    < / html >

    IM by selecting my image that is inside a div tag and when I hit the enter/return is disappeaers.

    When you do what you say, it will disappear you tap "return" with the selected image . This will remove the 'image' of this region.

    The solution is to select the image in Design view (if that's what you're comfortable with), hit "right arrow key" and then press return. This will give you space 'after' the image, keeping the image.

  • Responsive Design - Show and hide the div tags

    Hello

    I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.

    I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    line-height: 30px;

    }

    (Tablet)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    (office)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 0px;

    padding-bottom: 0px;

    text-align: center;

    border-top-width: 0px;

    border-bottom-width: 0px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    Thanks for your help!

    Alex

    Try to delete the two lines, as shown below.

    Display: block overrides display: no because it is further down in the code.

    For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

    Edit: I think that really is all you need:

    {#tab-container}

    display: none;

    }

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

  • Hide the div tags in the media queries

    Hello

    I ran into a bit of a problem trying to get some div tags appear on some devices. I thought that if a div has been set to hidden then it does not appear. I pasted my code below.

    The theory behind my design is to have a different fixed background on the desktop image, Tablet and phone. So I inserted a transparent image on top to control how image is seen on each window.

    "What I try to achieve is when the site is displayed on a desktop ' #large-ipad" is hidden and the ' #-wide image' is seen. "" And then once the site reaches the correct display window i.e. an ipad ' #large-ipad ' becomes visible and the ' #-wide image "is hidden. Then a third image will swap when it is read on a mobile device, but I have not to this article yet.

    When it is viewed on a desktop computer I think it is still showing the image sheets before the roll content.

    This is just a test at the minute, so there is no content and background images are set on my computer. If you don't know what I'm after, please ask and I will try to rephrase my description.

    @media only screen and (min-width: 481px) {}

    {.gridContainer}

    Width: 100%;

    padding-left: 0%;

    padding-right: 0%;

    margin: auto;

    background-attachment: fixed;

    background-image: url(images/bg-ipad.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    background-color: #FFF;

    padding-top: 20px;

    padding-bottom: 20px;

    }

    {# image - wide

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    visibility: hidden;

    }

    {#body - text

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    background-color: #FFF;

    padding-top: 300px;

    padding-bottom: 300px;

    }

    {#large-ipad}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    }

    / * Desktop layout: 769px for a max of 1920px.  Inherits the styles of: Mobile and tablet. */

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 100%;

    Max-width: 1920px;

    padding-left: 0%;

    padding-right: 0%;

    margin: auto;

    background-attachment: fixed;

    background-image: url(images/bg-image.jpg);

    background-repeat: no-repeat;

    background-position: top center;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    height: 70px;

    z-index: 1000;

    background-color: #FFF;

    position: fixed;

    Top: 0px;

    }

    {# image - wide

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    position: static;

    z-index: 0;

    }

    {#body - text

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    background-color: #FFF;

    padding-top: 300px;

    padding-bottom: 300px;

    }

    {#large-ipad}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    visibility: hidden;

    overflow: hidden;

    }

    }

    Any help would be massively appreciated I really want the effect I'm after.

    Kind regards

    Alex

    Hi all

    Think I have asked this question a little prematurely. I thought it, just needed to change the None display: display: none;

    Sorry to take your time to read above.

    See you soon,.

    Alex

  • positioning of the div tags

    Hello Dreamweavers

    I practice using Div tags, and I added 2 boxes. My first thought was how can I have these boxes to be side by side. Have blue on the left and the right aqua area. So I did the box1_blue

    and was inserted in the upper left corner. And then the box2_aqua has been placed under the blue. While I was playing around with the properties of the area the box2_aqua suddenly moved to the upper right corner, exactly where I wanted it to be, but I do not understand how it got there!

    u2a1.jpg

    u2a2.jpg

    {#box1}

    background-color: #00F;

    height: 200px;

    Width: 300px;

    float: left;

    }

    {#box2}

    background-color: #0FF;

    height: 200px;

    Width: 300px;

    float: right;

    Read up on the fleet working in CSS

    http://CSS.maxdesign.com.au/Floatutorial/

    http://CSS-tricks.com/all-about-floats/

  • The alignment of the div tags/content

    I have a div class = "wrapLinks" (unordered list) and a div class = "slider" (image carousel), and both are within the class = "content" div  At some point, "wrapLinks" were in the top left of the content.  After you create the div class is 'slider', the 'wrapLinks' have been 'pushed' down under the "cursor" that comes from taking up space at the top left of the content.  Ideally, I want the two (aligned horizontally) inline with eachother. First, I tried to change the margin for both classes of div in the css, but that doesn't seem to work.  I then tried to add "float: left;" to the "wrapLinks" and "float: right;" for the "cursor" in the css, but that also does not work.  I also try to put a button on the cursor.  I think that's what we call a 'floating div tag", but not sure.  I feel that I write the CSS properly for each class of div.

    Any ideas on what I can / should I do?

    I have provided a reference image.

    div_tag_help.JPG

    Even with the following addition/changes, the carousel seems too wide to fit completely on the page:

    .wrapLinks UL

    {

    margin: 10px 0px 0px;

    padding: 4px 0px 0px;

    do-family: "Arial Unicode MS";

    / * + 9px placement: shift-346px; * /

    position: relative;

    left: 9px;

    top:-346px;

    }

    .float-right

    {

    float: right;

    margin: 225px 60px banner 0px 0px;

    / * + placement: Maj 51px-301px; * /

    position: relative;

    left: 51px;

    high:-301px;

    }

    /*################*/

    . Slider

    {

    / * + placement: Maj 248px 8px; * /

    position: relative;

    left: 248px.

    top: 8px;

    }

Maybe you are looking for

  • Pavilion 23-h017c: The Key/icon of Windows do not work

    Recently, my warranty has expired and I am now unable to open Windows from my Microsoft Wireless Comfort Keyboard 5000 (the key between CTRL and ALT on the left) or when I click on the Windows icon located in the lower left corner of my screen.  When

  • T430u cannot start

    Hi guys,.I just plug a 2nd T430u last month. Yesterday, when I turned on, he stopped to choose device boot screen! After choosing hard drive to boot, she came back to "choose the boot device"!Help me, please!http://S17.postimg.org/bxyza565b/image.jpg

  • have ipod touch generation 6.  can I use a Home Kit

    have ipod touch generation 6, ios 9.1.  can I use Kit home app.  thnx

  • get date

    Good evening everyone,I want to create a table that contains the dates I record all clicksThe problem is that I have to register a single valueHelp me pleaseThis is attached to the vi

  • Temporary user profile

    Be connected with a profile temporary user, most of my stuff, files, music, pictures disappeared, cannot restore my system beyond today? Not an IT expertise and detailed explanation as such and the procedure for resolution of the problems would be mo