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

Goodbye CSS - welcome back with open arms TABLES

Discuss Goodbye CSS - welcome back with open arms TABLES in the CSS Help forum on Dev Shed.
Goodbye CSS - welcome back with open arms TABLES 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 February 17th, 2004, 04:28 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
Goodbye CSS - welcome back with open arms TABLES


Yet another question about CSS layout. All I want is a block that encloses three others on the left (title), centre(description) and right(image) of the encapsulating block. I can do this with my eyes shut using tables but after several frustrating hours scanning online CSS tutorials, tryng DIV, SPAN, float left/right/AnywayAtAllAndPleaseDearGodWorkThisTime, I'm still no nearer the truth.

Code:
<HTML>
<HEAD>
  <style type="text/css" media="screen">
.header {
	background-color : #E7D69C;
        font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
        font-size : 1.1em;
	color : black;
	border : 4px #CCDFCC groove;
	margin-left : 5%;
	padding-left : 0.2em;
	padding-right : 0.2em;
	width : 90%; 
}
.headerTitle {
	float : left;
	width : 33%;
	position : relative;
}
.headerDescription {
	float : left;
	text-align : center;
	width : 33%;
	position : relative;
}
.headerImage {
	text-align : right;
	width : 34%;
	position : relative;
}
  </style>
  
 </HEAD>
<BODY>
<DIV CLASS="header">
<DIV CLASS="headerTitle">
Title
</DIV>
<DIV CLASS="headerDescription">
Description
</DIV>
<DIV CLASS="headerImage">
Image
</DIV>

</DIV>
</BODY>
</HEAD>


Can anyone stop my slide back into tables?
Reply With Quote
  #2  
Old February 17th, 2004, 04:46 PM
F'Nok F'Nok is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Location: Geelong, Australia
Posts: 14 F'Nok User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Send a message via ICQ to F'Nok Send a message via AIM to F'Nok
I try to follow a few simple rules for these things.

1. Always put floated elements first.
2. Block elements like to push down, use inline to avoid that.

So, change your style to
Code:
.headerTitle {
	float: left;
	width: 33%;
}
.headerDescription {
	text-align: center;
	width: 33%;
	display: inline;
}
.headerImage {
        float: right;
	text-align: right;
	width: 34%;
}
  </style>

And also change your div order around, so your HTML is.
Code:
<div class="header">
    <div class="headerTitle">Title</div>
    <div class="headerImage">Image</div>
    <div class="headerDescription">Description</div>
</div>


And this looks great in NS7 and IE6.
Reply With Quote
  #3  
Old February 17th, 2004, 04:56 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
Quote:
Originally Posted by F'Nok
I try to follow a few simple rules for these things.

1. Always put floated elements first.
2. Block elements like to push down, use inline to avoid that.

So, change your style to
Code:
.headerTitle {
	float: left;
	width: 33%;
}
.headerDescription {
	text-align: center;
	width: 33%;
	display: inline;
}
.headerImage {
        float: right;
	text-align: right;
	width: 34%;
}
  </style>

And also change your div order around, so your HTML is.
Code:
<div class="header">
    <div class="headerTitle">Title</div>
    <div class="headerImage">Image</div>
    <div class="headerDescription">Description</div>
</div>


And this looks great in NS7 and IE6.



Close, but no banana. I can still hear those tables knock knock knocking at the gate.

1/ Description is NOT centered (using Mozilla)
2/ The order of presentation of the DIVs in the main HTML body is hardly the most logical - having to put 'image' second when it's displayed third?!?!?!?!.
3/ What happens if I want a 4th item within the encapsulating DIV?
Reply With Quote
  #4  
Old February 17th, 2004, 05:55 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,690 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: 4 Weeks 7 h 31 m 21 sec
Reputation Power: 600
Code:

css:

.headerTitle {
	float : left;
	width : 33%;


}
.headerDescription {
	margin:0 33%;
	text-align : center;



}
.headerImage {
	float : right;
	text-align : right;
	width : 33%;


}


html:

<div class="header">
	<div class="headertitle">title</div>
	<div class="headerimage">image</div>
	<div class="headerdescription">description</div>
</div>
Reply With Quote
  #5  
Old February 17th, 2004, 06:43 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
Quote:
Originally Posted by Akh
Code:

css:

.headerTitle {
	float : left;
	width : 33%;


}
.headerDescription {
	margin:0 33%;
	text-align : center;



}
.headerImage {
	float : right;
	text-align : right;
	width : 33%;


}


html:

<div class="header">
	<div class="headertitle">title</div>
	<div class="headerimage">image</div>
	<div class="headerdescription">description</div>
</div>



No bad. While completely illogical in the order in which you use the DIV statements (and the margin definition is not needed (in Mozilla anyway)), it at least does what I want. However, how would you do 4 separate DIVs on a similar left-right row?
Reply With Quote
  #6  
Old February 17th, 2004, 07:05 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,690 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: 4 Weeks 7 h 31 m 21 sec
Reputation Power: 600
if you got a longer sentence in the description the margin is needed to prevent it to overlap with the left and right box.


you can use position:absolute instead of float.
then you can preserve the order.
remember to have position:relative; in the parent element for the position:absolute
Code:
css:
.header {
	background-color : #E7D69C;
    font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
    font-size : 1.1em;
	color : black;
	border : 4px groove #CCDFCC ;
	margin-left : 5%;
	padding-left : 0.2em;
	padding-right : 0.2em;
	width:90%;
	position:relative

}
.headerTitle {
	position:absolute;
	top:0;
	left:0;
	width : 33%;
}

.headerDescription {
	margin:0 33%;
	text-align : center;
}

.headerImage {
	position:absolute;
	top:0;
	right:0;
	text-align : right;
	width : 33%;
}

html:
<div class="header">
	<div class="headertitle">title</div>
	<div class="headerdescription">description</div>
	<div class="headerimage">image</div>
</div>



for more elements float is probably the best.

Code:
css:

.headerTitle {
	float:left;
	width : 25%;
}

.headerDescription {
	float:left;
	text-align : center;
	width : 25%;
}

.headerImage {
	float:left;
	text-align : right;
	width : 25%;
}

 html:
<div class="header">
	<div class="headertitle">title</div>
	<div class="headerdescription">description</div>
	<div class="headerimage">image</div>
	<div class="headerimage">image</div>
	<div style="clear:both;"></div>
</div>
Last edited by Akh : February 17th, 2004 at 07:08 PM.
Reply With Quote
  #7  
Old February 17th, 2004, 07:21 PM
brianellisrules brianellisrules is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 36 brianellisrules User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 46 m 38 sec
Reputation Power: 5
some neat articles here about css layouts, columns, etc.

http://www.positioniseverything.net/
Reply With Quote
  #8  
Old February 17th, 2004, 07:24 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
(Your advice much appreciated.)

Quote:
Originally Posted by Akh
if you got a longer sentence in the description the margin is needed to prevent it to overlap with the left and right box.

for more elements float is probably the best.

Code:
css:

.headerTitle {
	float:left;
	width : 25%;
}

.headerDescription {
	float:left;
	text-align : center;
	width : 25%;
}

.headerImage {
	float:left;
	text-align : right;
	width : 25%;
}

 html:
<div class="header">
	<div class="headertitle">title</div>
	<div class="headerdescription">description</div>
	<div class="headerimage">image</div>
	<div class="headerimage">image</div>
	<div style="clear:both;"></div>
</div>


Not sure how you would do the 4 elements with floats but your advice about relative/absolute positioning works with a bit of tweaking:
Code:
<HTML>
<HEAD>
  <style type="text/css" media="screen">
.header {
	background-color : #E7D69C;
        font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
        font-size : 1.1em;
	color : black;
	border : 4px #CCDFCC groove;
	margin-left : 5%;
	padding-left : 0.2em;
	padding-right : 0.2em;
	width : 90%;
	height : 1.2em;
	position:relative;
}
.headerFirst {
	top : 0;
	left : 0;
	width : 25%;
	position:absolute;
}
.headerSecond {
	width : 25%;
	margin : 0 -5%;
	top : 0;
	left : 25%;
	text-align : center;
	position:absolute;
}
.headerThird {
	top : 0;
	right : 25%;
	text-align : center;
	width : 25%;
	position:absolute;
}
.headerFourth {
	top : 0;
	right : 0;
	text-align : right;
	width : 25%;
	position:absolute;
}
  </style>
  
 </HEAD>
<BODY>
<div class="header">
    <div class="headerFirst">First</div>
    <div class="headerSecond">Second</div>
    <div class="headerThird">Third</div>
    <div class="headerFourth">Fourth</div>
</div>
    <DIV>This should be below all the above.</DIV>
</BODY>
</HEAD>


As the 4 elements are encapsulated in the HEADER class DIV, I would never have thought you would need the height definition in the HEADER class. Is it not possible to have the HEADER class expand automatically to meet the height required by the enclosed DIVs?
Reply With Quote
  #9  
Old February 17th, 2004, 07:43 PM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
  
Join Date: Mar 2002
Location: norway
Posts: 2,690 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: 4 Weeks 7 h 31 m 21 sec
Reputation Power: 600
i always thought float is easier to work with, but that is just me

with both, position:absolute and float you are taking the element out of the normal flow therefor you have problem with the parent elements height, thats why i used the div-element with clear:both after the floated elements.

with float you can trim down the css quite much,
and you don't have to position everything yourself
Code:

.headerFirst, .headerSecond, .headerThird, .headerFourth {
	float:left;
	width : 25%;
}

.headerSecond, .headerThird {
	text-align : center;

}

.headerFourth {
	text-align : right;

}

html:
<div class="header">
    <div class="headerFirst">First</div>
    <div class="headerSecond">Second</div>
    <div class="headerThird">Third</div>
    <div class="headerFourth">Fourth</div>
    <div style="clear:both;"></div>
</div>
Last edited by Akh : February 17th, 2004 at 07:45 PM.
Reply With Quote
  #10  
Old February 17th, 2004, 09:42 PM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
Quote:
Originally Posted by Akh
i always thought float is easier to work with, but that is just me

with both, position:absolute and float you are taking the element out of the normal flow therefor you have problem with the parent elements height, thats why i used the div-element with clear:both after the floated elements.

with float you can trim down the css quite much,
and you don't have to position everything yourself
Code:

.headerFirst, .headerSecond, .headerThird, .headerFourth {
	float:left;
	width : 25%;
}

.headerSecond, .headerThird {
	text-align : center;

}

.headerFourth {
	text-align : right;

}

html:
<div class="header">
    <div class="headerFirst">First</div>
    <div class="headerSecond">Second</div>
    <div class="headerThird">Third</div>
    <div class="headerFourth">Fourth</div>
    <div style="clear:both;"></div>
</div>


...maybe I can be sold on CSS. Thanks for the time and effort.
Reply With Quote
  #11  
Old February 18th, 2004, 01:51 AM
Sir Fragalot Sir Fragalot is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 73 Sir Fragalot User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 34 m 29 sec
Reputation Power: 5
Experimenting with layouts.... How do I get the right-hand DIVs (content = 'two') to automatically stretch down to the same height as the left-hand DIVs (as table cells would):

Code:
<HTML>
<HEAD>
<STYLE>
.frame {
	margin-left : 5%;
	width : 90%;
	font-size : 1em;
	text-align : center;
}
.header {
	width : 800;
	border : 0.05em dashed black;
	text-align : center;
}
.header1, .header2, .header3 {
	float : left;
	margin : 1px;
	vertical-align : center;
	font-size : 0.8em;
	position : relative;
	border : 0.05em red solid;
}
.header1 {
	text-align : right;
	width : 750;
}
.header2 {
	text-align : center;
	width : 40;
}
.clear {
	clear : both;
}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="frame">
<DIV CLASS="header">
	<DIV CLASS="header1">One<BR>One Again</DIV>
	<DIV CLASS="header2">Two</DIV>
	<DIV CLASS="clear"></DIV>
	<DIV CLASS="header1">One</DIV>
	<DIV CLASS="header2">Two</DIV>
	<DIV CLASS="clear"></DIV>
	<DIV CLASS="header1">One</DIV>
	<DIV CLASS="header2">Two</DIV>
	<DIV CLASS="clear"></DIV>
	<DIV CLASS="header1">One<BR>One Again</DIV>
	<DIV CLASS="header2">Two</DIV>
	<DIV CLASS="clear"></DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Goodbye CSS - welcome back with open arms TABLES

« 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: »