Databases
StackOverflow2013
Postsdbo
POCarousel out of alignment with rest of website anyone care to help me
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCarousel out of alignment with rest of website anyone care to help me
    text
    copied!<p>See the below images:</p> <p>the website as viewed in chrome <a href="http://i48.tinypic.com/2rr9zf7.png" rel="nofollow">http://i48.tinypic.com/2rr9zf7.png</a></p> <p>the website as viewed in dreamweaver: <a href="http://i50.tinypic.com/mcvey9.png" rel="nofollow">http://i50.tinypic.com/mcvey9.png</a></p> <p>The problem is the carousel doesnt line up with the navbar at the top (see top right). it seems to be out of line by 1mm </p> <p>I believe it may have to do something with the navbar (see second image). As you can see the contact button falls below the rest of the buttons. </p> <p>my theory is that its causing the carousel to be out of alignment. </p> <p>HTML:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;link href="../CSS/styles.css" rel="stylesheet" type="text/css"&gt; &lt;link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="outer"&gt; &lt;a href="file:///C|/Users/Callum/Desktop/desktop/website folder/WEBSITE/main.html"&gt;&lt;img src="../Images/webimages/banner top.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div id="topnav"&gt; &lt;ul id="list-nav"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Technologies&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="carousel"&gt; &lt;iframe src="../Carousel/HTML/carousel.html" height="280" width="900" scrolling="no" frameborder="0"&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;div id="mainbody"&gt; &lt;div id="bigbuttons"&gt; &lt;img src="../Images/webimages/Meettheteam.jpg"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>/* Reset */ a img { border: none; } html, body { padding:0; margin:0; } a { text-decoration: none; } ul, li { list-style-type: none; } img.floatLeft { float: left; margin: 0px; } * { margin: 0; padding: 0; } body {background-color:#F1F1F1; } #outer { width: 900px; margin: auto; } #topnav { width: 900px; margin: auto; } #mainbody { width: 900px; margin:auto; clear:both; } #list-nav li{display:inline-block;width:20%;float:left;} #carousel { width: 900px; height: 280px; margin:auto; clear:both; } #bigbuttons { width: 220px; height: 80px; margin:auto; margin-top: 9px; clear:both; float:left } ul#list-nav li a { text-decoration:none; font-family:Arial, Helvetica, sans-serif; padding:5px 0; width: auto; background:#999; color:#eee; float: left } ul#list-nav li a { text-align:center; border-left: 1px solid #fff; width: 100%; } ul#list-nav li a:hover { background:#CCC; color:#ffff; } ul#list-nav li a:hover { background:#CCC; color:#ffff; } #content-fullwidth { width:100%; }​ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload