html - How can I eliminate the space between two divs inside a containing div in Live View? -
I'm having trouble replicating the directional linking so that they sit flush without any white space in between. A div has an image and sits on the other, in which the navigation bar occurs, both divs sit inside a containing div. White space is not more than a few pixels long, it does not appear when coding in DreamWire, only once viewed in the browser or live view is started. My document has a margin of 0 in the body. I have tried to make margin 0 of any division without any luck. Also does not seem to work, try some of the padding was also used with the float, it should be obvious, but I long have been stuck on this ..
HTML: & lt; Div id = "header" & gt; & Lt; Div id = "bannner" & gt; & Lt; Img src = "picture / banner.jpg" width = "900px" height = "350px" alt = "banner" /> & Lt; / Div & gt; & Lt ;! - End of banner div - & gt; & Lt; Div id = "navbar" & gt; & Lt; Div class = "hovering new man" id = "a" & gt; & Lt; Img class = "icon" src = "image / home page" & gt; & Lt; P class = "text" & gt; Home & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "hovering nabber" id = "two" & gt; & Lt; Img class = "icon" src = "image / tool" & gt; & Lt; P class = "text" & gt; Main & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "hovering nabber" id = "three" & gt; & Lt; Img class = "icon" src = "image / sandwich page" & gt; & Lt; P class = "text" & gt; Sandwich & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "hovering newbar" id = "four" & gt; & Lt; Img class = "icon" src = "image / desserts.png" & gt; & Lt; P class = "text" & gt; Desserts & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - End of navbar - & gt; & Lt; / Div & gt; & Lt ;! - End of header - & gt; CSS: # header margin: auto; Height: 530px; Width: 900px; Background color: # F8F8F8; #Banner margin: 0 pixels; #navbar Margin: 0 pixels; Height: 180 pixels; Width: 900 pixels; Background color: red;
I will set the height for the banner div.
# banner {height: 350px; } Or block your display at a banner IMG {display: block; }
This will solve your problem.
& lt; Div id = "header" & gt; & Lt; Div id = "bannner" & gt; & Lt; Img src = "picture / banner.jpg" width = "900px" height = "350px" alt = "banner" /> & Lt; / Div & gt; & Lt ;! - End of banner div - & gt; & Lt; Div id = "navbar" & gt; & Lt; Div class = "hovering new man" id = "a" & gt; & Lt; Img class = "icon" src = "image / home page" & gt; & Lt; P class = "text" & gt; Home & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "hovering nabber" id = "two" & gt; & Lt; Img class = "icon" src = "image / tool" & gt; & Lt; P class = "text" & gt; Main & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "hovering nabber" id = "three" & gt; & Lt; Img class = "icon" src = "image / sandwich page" & gt; & Lt; P class = "text" & gt; Sandwich & lt; / P & gt; & Lt; / Div & gt; & Lt; Div class = "hovering newbar" id = "four" & gt; & Lt; Img class = "icon" src = "image / desserts.png" & gt; & Lt; P class = "text" & gt; Desserts & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - End of navbar - & gt; & Lt; / Div & gt; & Lt ;! - End of header - & gt; CSS: # header margin: auto; Height: 530px; Width: 900px; Background color: # F8F8F8; #Banner margin: 0 pixels; #navbar Margin: 0 pixels; Height: 180 pixels; Width: 900 pixels; Background color: red;
I will set the height for the banner div.
# banner {height: 350px; } Or block your display at a banner IMG {display: block; }
This will solve your problem.
Comments
Post a Comment