Hi, I'm developing a website at the moment and struggling a bit with aligning a few components inside of a section.
The section highlighted in red consists of 3 elements, the image, textboxes and button, but no matter what I try I can't seem to get them aligned correctly, or to stay within the defined bounds of the section.
The section highlighted in green is in the header and I can't seem to drag any other objects (images or otherwise) into that top section aside from the found.it logo.
I'd appreciate any help as to how I might overcome these issues.
This is my design I'd like to achieve:
CSS:
head{ background-color: rgb(0,0,0); position: fixed; width: 100%; height:43px; display: block; text-align: center; float: center; z-index:-1; } head input { margin-top:500px;; } footer { left:0; right:0; bottom:0; position: fixed; clear: both; text-align: center; font-family: ERASLGHT; } body { margin: 0 auto; width: 980px; background-image:url('http://i46.tinypic.com/r1cuo2.png'); font-family:'ERASLGHT'; } @import url(<a href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="nofollow">http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300</a>); section, article, footer { font-family: 'Roboto Condensed', sans-serif; background-color: rgba(0,0,0,0.1); } section, article{ margin: 12px; } a:link { color: black ; text-decoration: none ; } a:hover { color: rgb(128,128,128); } #title{ font-size:2.0em; width:704px; height:64px; margin-top:24px; padding:12px; margin-bottom:-12px; } #profile{ font-size:2.0em; width:704px; height:128px; margin-top:24px; padding:12px; margin-bottom:-12px; } #profile h3, h4{ margin-top:-110px; margin-left: 138px; } #post{ width:728px; height:88px; } #post img{ margin:12px; height:100%; float:top; } #post input{ float:top; margin-left:150px; margin-top:-100px; } h2 { font-size: 2.2em; letter-spacing: 0em; text-align: left; } h3 { font-size: 1.3em; letter-spacing: 0em; text-align: left; } h4 { font-size: 0.6em; letter-spacing: 0em; text-align: left; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 8px; } p { font-family: 'Roboto Condensed', sans-serif; } ::-webkit-scrollbar-thumb { border-radius: 8px; background:rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } article { padding:12px; height: 700px; overflow-y: scroll; float:left; width: 704px; background-color: #0000E6 transparent; } #friends { padding:12px; margin-top:-76px; float:right; width:176px; } #followed { padding:12px; float:right; width:176px; } ul,li { list-style: none; } #trends { padding:12px; float:right; width:176px; }
HTML:
<!DOCTYPE html> <html> <head> <title>Found.it</title> <a href="index.htm"><img src="resources/images/logo.png" border="0" alt=""></a> <!--<a href="profile.htm"><img src="resources/images/search.png" border="0" alt="" align="right"></a>--> <link href="resources/css/reset.css" rel="reset" /> <link href="resources/css/style.css" rel="stylesheet" /> <form> <input type="text" name="textPost"> </form> </head> <body> <section id="post"> <form> <input type="text" name="textPost"></br> <input type="text" name="tagPost"> </form> <img src="resources/images/prof1.jpg" alt="blah"> </section> <!-- --> <article> </article> <section id="friends"> <a href="friends.htm"><h2>Friends</h2></a> </section> <section id="followed"> <a href="followed.htm"><h2>Followed</h2></a> <p> <ul> </ul> </p> </section> <section id="trends"> <a href="trends.htm"><h2>Trends</h2></a> <p> <ul> </ul> </p> </section> </body> <footer> <p>Found.it 2013</p> </footer> </html>
Cheers, Vaux
Basic misunderstanding
I think you're confusing the head and header elements. See http://dev.w3.org/html5/markup/.
When you added %flow elements to the head element, the head was closed, and the body element was automagically added. That has likely caused other error cascades.
cheers,
gary