March 21, 201313 yr Simple issues I cant resolve. All I want to do is add a margin of approx 20px from the sections above. Any ideas. <!DOCTYPE html> <html lang="en"> <head> <title>Welcome to Malro Baltic</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/picture-slides.css"> <link href='http://fonts.googleapis.com/css?family=Economica:400,700' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/PictureSlides-jquery-2.0.js"></script> <script type="text/javascript"> jQuery.PictureSlides.set({ // Switches to decide what features to use useFadingIn : true, useFadingOut : true, useFadeWhenNotSlideshow : true, useFadeForSlideshow : true, useDimBackgroundForSlideshow : true, loopSlideshow : false, usePreloading : true, useAltAsTooltip : true, useTextAsTooltip : false, // Fading settings fadeTime : 500, // Milliseconds timeForSlideInSlideshow : 2000, // Milliseconds // At page load startIndex : 1, startSlideShowFromBeginning : true, startSlideshowAtLoad : false, dimBackgroundAtLoad : false, // Large images to use and thumbnail settings images : [ { image : "img/1.jpg", alt : "Picture 1", text : "This is picture 1" }, { image : "img/2.jpg", alt : "Picture 2", text : "This is picture 2" }, { image : "img/3.jpg", alt : "Picture 3", text : "This is picture 3", }, { image : "img/4.jpg", alt : "Picture 4", text : "This is picture 4", }, ], thumbnailActivationEvent : "click", // Classes of HTML elements to use mainImageClass : "picture-slides-image", // Mandatory mainImageFailedToLoadClass : "picture-slides-image-load-fail", imageLinkClass : "picture-slides-image-link", fadeContainerClass : "picture-slides-fade-container", imageTextContainerClass : "picture-slides-image-text", previousLinkClass : "picture-slides-previous-image", nextLinkClass : "picture-slides-next-image", imageCounterClass : "picture-slides-image-counter", startSlideShowClass : "picture-slides-start-slideshow", stopSlideShowClass : "picture-slides-stop-slideshow", thumbnailContainerClass: "picture-slides-thumbnails", dimBackgroundOverlayClass : "picture-slides-dim-overlay" }); </script> </head> <body> <div id="container"> <header> <div id="logo"><img src="img/logo.jpg" width="407" height="90" alt="Malro Baltic red triangle and blue bar company logo"></div> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Sites</a></li> <li><a href="#" style="width: 36px;">Contact</a></li> </ul> </div> </header> <section id="mainLiepynai"> <h1>SITE: LIEPYNAI</h1> <br> <br> <div id="imageContainer"> <div class="picture-slides-container"> <div class="picture-slides-fade-container"> <a class="picture-slides-image-link"> <span class="picture-slides-image-load-fail">The image failed to load:</span> <img class="picture-slides-image" src="img/1.jpg" alt="This is picture 1" /> </a> </div> <ul class="picture-slides-thumbnails"> <li><a href="pictures/1.jpg"><img src="thumbnails/1.jpg" alt=""></a></li> <li><a href="pictures/2.jpg"><img src="thumbnails/2.jpg" alt=""></a></li> <li><a href="pictures/3.jpg"><img src="thumbnails/3.jpg" alt=""></a></li> <li><a href="pictures/4.jpg"><img src="thumbnails/4.jpg" alt=""></a></li> </ul> </div> </div> <div class="picture-slides-dim-overlay"></div> <br> <br> <h1>SITE DESCRIPTION:</h1> <br> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.<br> <br> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </p> </section> <section id="sidebar"> <h1>SITE SELECTION:</h1> <br> <br> <img src="img/map.png" width="258" height="277" alt=""> <br> <br> <h1>SITE STATISTICS & TOOLS:</h1> <br> <p>Property Purchased: 2006<br> Plot Size: 3.4 hectares<br> Planning: Completed<br> Planning Permission: Granted for 22 houses<br> Planning Permission: Granted for 1 commercial/leisure construction<br> Price: </p> </section> <footer> test </footer> </div> </body> </html> * { margin: 0; padding: 0; } body { font-family: 'Economica', sans-serif; font-size: 100%; color: #000000; } h1 { font-weight: lighter; } #container { width: 950px; height: 700px; margin: 0 auto; padding: 0; } header { border-bottom: solid 1px #d6d6d6; height: 128px; } #logo { height: 90px; width: 407px; margin-top: 19px; float: left; } /* ---------- Navigation section ---------- */ #nav { margin-top: 5px; float: right; } #nav ul { list-style-type: none; } #nav li { display: inline; float: left; } #nav a { display: block; width: 60px; color: #000000; text-decoration: none; } #nav a:hover { text-decoration: underline; } /* ---------- Main Liepynai section ---------- */ #mainLiepynai { width: 568px; padding-top: 15px; float: left; } #sidebar { width: 312px; padding-top: 15px; float: right; } /* ---------- Footer section ---------- */ footer { height: 128px; margin-top: 20px; clear: both; border-top: solid 1px #d6d6d6; }
March 21, 201313 yr What sections do you want to apply the margin to? If it's the <section> elements themselves, simply add a margin-top declaration to the element in your CSS, for example: #mainLiepynai { width: 568px; float: left; margin-top: 20px; } Lyndsey.
March 21, 201313 yr Author ok iv fixed it by adding float left to the footer. not sure how or why that works after clearing the divs above but heyho
March 21, 201313 yr Since the two sections are floating left and right, they are collapsing the space they are occupying. You could include a clear after the two sections, like this: <section id="mainLiepynai"> ... </section> <section id="sidebar"> ... </section> <div style="clear:both;"></div> <footer> ... </footer> whilst at the same time removing the 'clear:both;' from the footer element. Then you won't need the float:left on the footer to apply the margin-top. Edit to add CSS for footer : /* ---------- Footer section ---------- */ footer { height: 128px; margin-top: 20px; border-top: solid 1px #d6d6d6; } Try that and let me know if it works
March 21, 201313 yr Author Legend. Thanks. So best to use <div style="clear:both;"></div> to create a theoretical clean line for a new div/section?
March 21, 201313 yr Yeah, either that or you can wrap the floats in a parent container with the property : overflow:hidden; Something like this: <div id="parent"> <section id="mainLiepynai"> ... </section> <section id="sidebar"> ... </section> </div> <footer> ... </footer> #parent { overflow:hidden; } footer {clear:both; margin-top:20px; } Lyndsey.
March 21, 201313 yr How can i center the UL within the Footer? You could wrap the list in a div and center the div, something like this: <div class="centered"> <ul> <li>... </li> </ul> </div> .centered { width:500px; margin:0 auto; } OR: footer ul { text-align:center; } Update: OR maybe this: <div class="centered"> <ul> <li>...</li> <li>...</li> </ul> </div> .centered { text-align:center; }
Create an account or sign in to comment