I am in the process of building my first ever webpage and i’m having issues with positioning.
I have manage to position most elements on my page fine (well, I think I have, all appear to be in the right place) but when I try to position a twitter feed, which I’ve wrappeed in a div the page expands in width.
When I remove the twitter div or don’t position it in CSS the page doesn’t expand. I have tried both absolute and relative positioning and get the same results.
Should I be using a different method to position or am I missing some mark up
Also, the page displays how it should in most browsers but then is all over the place on my iphone and andriod tablet. see link below
Sorry - I don’t have time to look at this properly just now. However, you have an extra pair of <body> tags which might be screwing things up. Try removing them and see if that helps anything.
for layout you rarely every need to position anything, so I’d do away with all the relative and absolute positioning on all elements, including your logo.
You have a very simple layout and it screams to be done with floats. This will also resolve your display issues on mobile devices (tablets, phones).
Set a width on the various containers and float them where needed.
Sorry I should have explain I am completey new to web design only a month in infact.
I know of this rule but in the book “The Art and science of CSS” it shows how to style the navigation bar to show which page you are on, so I have just replicated the mark up.
What mark up could I use to keep this effect and lose the extra body tag?
CSS
#twitter {
position: absolute;
display: inline;
top: 490px;
left: 903px;
} #navigation {
position: absolute;
top: 100px;
left: 170px;
width: 1000px;
height: 30px;
padding-bottom: 0px;
padding-top: 0;
margin: 0px auto;
margin-left: 0px;
margin-bottom: 3px;
border: 0px green;
background: #228653;
} #navigation ul {
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
} #navigation ul li {
width: 142px;
float: left;
margin: 0px;
padding: 0;
border: 0px solid #61D8A2;
} #navigation ul li a {
font-family: verdana, arial;
text-decoration: none;
display: block;
width: 142px;
height: 30px;
line-height: 30px;
font-size: 11pt;
color: #61D8A2;
} #navigation a:hover {
background-position: 0px;
font-weight: 675;
color: white;
} #body_hom#nav_hom a, #body_abo#nav_abo a, #body_you#nav_you a, #body_eds#nav_eds a, #body_for#nav_for a, #body_eve#nav_eve a, #body_con#nav_con a {
background: #61D8A2;
font-weight: normal;
color: white;
}
By copying markup from other places (or books) you’re making it harder for yourself, given that you’re new to the field. Almost all of the code—which I hope is not from the book, as it’s flawed to no end—is problematic, wrong, or redundant.
If you want to have a solid site, one that doesn’t break, then the only option you have is to start from scratch. This might sound horrible to you, but it’s better to learn how to properly design a site than starting off wrongly. You’ll have more headaches and more frustration by keeping the code you currently have.
Start with the basics, perhaps take a CSS and HTML course (SitePoint has some on learnable.com). Or start with a good tutorial site such as htmldog.com.
You could just move the id to the correct body tag and delete the extra one.
The opening <body> should always come immediately after the closing </head> tag. Change that to read <body id=“body_hom”>, as it’s this id which is allowing you to target this page specifically in your styles. The closing </body> tag should come right at the end of all your markup, right before the closing </html> tag. Delete the ones surrounding your nav menu. Does that help?
I agree with everything kohoutek has said. It’s much easier to learn by writing your own code than by trying to copy someone else’s and make it work. If you get stuck in the process, you can always come here and ask.
Big thanks for the floating and clearing article, I revamp the whole site and I’m finding it alot more smoother to maintain. All pages passed the html validator apart from the ones with the external twitter feed, facebook like box and external contact form
You need at least 10 posts to your account before you are allowed to post links. In the mean time (not that it matters since you have 9), you can do something like this.
If you have understood the content of the articles I posted, which is not easy reading for someone new to the topic, then you’re way ahead of most and have a solid foundation for building stable layouts.
