The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
css newbie, floats, thought i had it figured out
Discuss css newbie, floats, thought i had it figured out in the CSS Help forum on Dev Shed. css newbie, floats, thought i had it figured out Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

July 12th, 2003, 10:59 PM
|
|
I hate nerds
|
|
Join Date: Jul 2003
Posts: 540
Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0
|
|
|
css newbie, floats, thought i had it figured out
thought i had it figured out with css, but i guess not.
here is a small example. everything works well until i try to float those pieces of text--then it goes crazy.
anyone have any suggestion how to do this? im operating in strict mode
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style type=text/css>
div.entryWindow
{
position:relative;
border:2px solid #CCCCCC;
width:60%;
left:20%;
background:#FFFFFF;
color:#000000;
font-family:inherited;
font-size:12px;
margin-top:20px;
margin-bottom:20px;
}
div.header
{
position:relative;
background:#CCCCCC;
color:inherited;
font-family:inherited;
font-weight:bold;
padding-left:15px;
padding-right:15px;
padding-top:5px;
padding-bottom:5px;
}
div.footer
{
position:relative;
background:#CCCCAA;
color:inherited;
font-family:inherited;
padding-left:15px;
padding-right:15px;
padding-top:5px;
padding-bottom:5px;
}
div.content
{
position:relative;
background:#AF3FF8;
color:inherited;
font-family:inherited;
padding:15px;
}
</style>
</head><body>
<div class=entryWindow>
<div class=header>
[float this left]
[float this right]
</div>
<div class=content>blah balh</div>
<div class=footer><span class=entryActions>
[float this right]
</div>
</div>
</body></html>
|

July 13th, 2003, 09:45 AM
|
|
|
I imagine that when you float the elements they plant themselves on either side of the content element. This is because they are being floated in relation to their parent element, entryWindow, and do not take into consideration the other elements, such as 'content' or 'footer'.
Try placing 'header' and 'footer' inside of 'content', and then float two header elements to the left and right, then vertical-align 'footer' and float it right. You'll have to swap 'content's' padding with the other elements.
Also, using percentages with absolute values is not the best idea.
Why are you doing this? You could use a table with CSS:
Code:
<table>
<tr>
<td>[float this left]</td>
<td>[float this right]</td>
<tr>
<tr>
<td colspan=2>content</td>
<tr>
<tr>
<td colspan=2>[float this right]</td>
</tr>
</table>
|

July 13th, 2003, 12:27 PM
|
|
I hate nerds
|
|
Join Date: Jul 2003
Posts: 540
Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0
|
|
|
i guess im an idiot. for some reason im under the impression that tables are "bad" for some reason and that divs are the way to go.
im just trying to learn something new, i guess you could say and understand this CSS thing.
|

July 13th, 2003, 03:10 PM
|
 |
|<.+#f@#+.&.|
|
|
Join Date: Mar 2002
Location: norway
|
|
if its only text that you try to align, you can use the text-align propety
i made this fast, could be better solutions 
(checked in moz and op7)
just listing the changes i made:
html:
Code:
<div class="header">
<div class="left">[float this left]</div>
[float this right]
</div>
css:
Code:
div.header{
...
text-align:right;
}
div.footer{
...
text-align:right;
}
.left {
float:left;
width:20%;
}
and one last ting remeber to use quotation marks " " ie, <div class="header">
|

July 13th, 2003, 03:21 PM
|
|
I hate nerds
|
|
Join Date: Jul 2003
Posts: 540
Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0
|
|
|
thanks.
maybe i should just use tables. seems so much easier.
question:
as long as your class names or id names have no space, then not using quotes seems to be ok.
are there any future problems with not using quotes>
|

July 13th, 2003, 03:45 PM
|
 |
|<.+#f@#+.&.|
|
|
Join Date: Mar 2002
Location: norway
|
|
in x-html you have to use quotations on every attribute value http://www.w3.org/TR/xhtml1/#h-4.4
pretty sure you have to use quatations in 4.01 strict, (could be wrong, long time since i've used it )
anyway its a good habit to learn 
|

July 13th, 2003, 03:57 PM
|
|
I hate nerds
|
|
Join Date: Jul 2003
Posts: 540
Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0
|
|
|
you dont have to use quotations.
i guess i should.
the reason i dont is because i use php edit,
and it freakin automatically creates two sets of quotes, parenthesis, brackets etc.
i hate that!
does anyone know how to turn it off?
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|