CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

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.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old July 12th, 2003, 10:59 PM
sad.machine sad.machine is offline
I hate nerds
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jul 2003
Posts: 533 sad.machine Negative: is most likely a SPAMMER and a traitor to the cause. 
Time spent in forums: 20 h 48 m 41 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>
Reply With Quote
  #2  
Old July 13th, 2003, 09:45 AM
Winters Winters is offline
Bad Coder
Dev Shed Intermediate (1500 - 1999 posts)
  
Join Date: Jul 2003
Posts: 1,744 Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level)Winters User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 1 Week 5 Days 12 h 3 m 32 sec
Reputation Power: 171
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>
Reply With Quote
  #3  
Old July 13th, 2003, 12:27 PM
sad.machine sad.machine is offline
I hate nerds
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jul 2003
Posts: 533 sad.machine Negative: is most likely a SPAMMER and a traitor to the cause. 
Time spent in forums: 20 h 48 m 41 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.
Reply With Quote
  #4  
Old July 13th, 2003, 03:10 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548
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">
Reply With Quote
  #5  
Old July 13th, 2003, 03:21 PM
sad.machine sad.machine is offline
I hate nerds
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jul 2003
Posts: 533 sad.machine Negative: is most likely a SPAMMER and a traitor to the cause. 
Time spent in forums: 20 h 48 m 41 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>
Reply With Quote
  #6  
Old July 13th, 2003, 03:45 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,622 Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level)Akh User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 3 Weeks 6 Days 2 h 18 m 25 sec
Reputation Power: 548
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
Reply With Quote
  #7  
Old July 13th, 2003, 03:57 PM
sad.machine sad.machine is offline
I hate nerds
Dev Shed Novice (500 - 999 posts)
  
Join Date: Jul 2003
Posts: 533 sad.machine Negative: is most likely a SPAMMER and a traitor to the cause. 
Time spent in forums: 20 h 48 m 41 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?
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > css newbie, floats, thought i had it figured out

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway.