Jump to content

A smarter way of doing this?


daddyalfie

Recommended Posts

On THIS web-page I floated-left the thumbnail links at the top in a <ul> so as to display them in line. But then the "I" in the first paragraph below (I remember...) floated right up with the thumbnails! I solved it by adding margin-right to the <li> until it was pushed down to where it belongs.

 

I first tried to add clear: left; to the paragraph CSS, but that screwed everything up beyond recognition!

 

I know there must be a smarter way to fix this!

 

As always - thanks! Alfie

Link to comment
Share on other sites

@ Andrea: I never thought I would have to correct YOU!! It is clear: both; and it did not work either anyway.

 

@ akurtula: Thanks and I shall investigate the "overflow" property. That sounds interesting!

 

What I do not understand properly is the "display: inline;" CSS property. Would that put the thumbnails "All-In-A-Row"? (or is that in-line ?)

 

Thanks for looking!

 

Alfie

Edited by daddyalfie
Link to comment
Share on other sites

the inline does the same thing you did with the thumbnails - it will display them horizontally. So saying

ul li{float:left;}

is the same as

ul li{display:inline;}

 

But I never used the inline (I am used to the floating way) so I am not 100% sure whether it's a good idea or not

 

use this to quickly test any css you are not sure off http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline

Edited by akurtula
Link to comment
Share on other sites

@ Andrea: I never thought I would have to correct YOU!! It is clear: both; and it did not work either anyway.

I don't think that falls under the definition of correction :D

 

The reason things fell apart on you with the clear; both is that the div the text is in is as wide as your wrapper and clearing the p throws it under your floated nav division. I don't think your layout is wrong - it works, but I'd have added the background images to a wrapper/header/footer and would have my content div separate next to the nav.

 

You're still mixing lower and upper case - next time something isn't working, see if that's not the problem :P

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...