Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi everyone, I'll try to describe this as best as possible: I hear a lot of talk about floating images as opposed to "absolute positioning". I'm re-designing a graphics-intensive website that's laid out like a magazine with images all over the place. What's the best way to go about designing pages with images in numerous locations. I can't figure out how to do a "float". The Absolute positioning seems to make the most sense, but I'm new at this. Do I need to put the Left, top, widht and height attributes in when floating images? Can anyone give me an example of the CSS coding to float an image? Better yet, if anyone has a great web resource, I can go in and look at the source code. Thanks!
-
Go here for some good inspiration: http://abriefmessage.com/2007/12/05/twemlow/
You definitely don't want to use absolutely positioned elements for images ... floating makes the most sense because you want your elements floated to your content.
Here is a great tutorial on positioning with CSS ... learn it in 10 easy steps:
http://www.barelyfitz.com/screencast/html-training/css/positioning/ -
Thank you so much for the reply. I guess my problem is that whenever I use the float syntax, it throws everything to the top left no matter what I do. That's why i've been using the absolute positioning because I can't think of how else to position an image. The float syntax doesn't seem to include top, bottom, left, or any other placement indicator. I guess I need to find some sort of tutorial about how to "float images" because the books are worthless. They only tell how to float text.
-
Floating text vs floating images should be no different. Either float: left or float: right.
What books are you reading that you say are worthless at explaining how to "float images"? I would that best way to learn is to just do it. Make a dummy page and float some images to the left and right to see how they react to the text around it and the other floated images. -
Here's a quick sample of what I've been doing. From the piece of script below, I know that my pic is going to be toward the center of the page, and just a bit down from the top. Whenever I use the {float:left; it goes to the top left no matter what I do. I know I'm doing something wrong, I just don't know what it is. What I'd like is to be able to position the images in a specific spot like the absolute positioning. I've tried 3 books that are worthless to me because they only give "bits" of examples. They just assume that you know how to place everything. Like: .floatright {float:right;} Where does this info go? in the head? and how? Is it a div, or something like that? I've heard people say that floating images is the only way to go, but so far, it's not working for me. I realize i'm just learning.
<html>
<head>
<title>
<style type="text/css">
<!--
div.c12 {position:absolute;left:450px;top:290px;width:244px;height:189px;}
-->
</style>
<body>
<div class-"c12"<img src="noimage.jpg" width="244" height="189" alt="no image" /></div>
</html>
</body> -
-
CommentAuthorArcNeXuS.net
- CommentTimeMar 2nd 2008
check out this page .. for floating element discussed ...
http://www.yourhtmlsource.com/stylesheets/csslayout.html#floatingelements
check out this page for the example of floating elements including layered elements by divisions
/* using Z index */
http://www.yourhtmlsource.com/examples/positioning2.html
I think this will assist you in your magazine style layout.. -
-
Thanks alot, I'll check it out and see what I can decipher. I've been using the z-index property already and it's been a real life-saver in some cases. This group has likewise been a real pleasure, and I appreciate all the help.
1 to 7 of 7