|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
September 4th, 2004, 06:31 PM
|
||||
|
||||
|
How to make this simple example with divs/css?
Hi,
Take a look at this page: http://nazgulled.home.sapo.pt/table.html This is easly done with tables as you can see, now, I want reproduce the same effect with divs but I don't know how. My exact problem is, how can I center more than 1 div tag in the same "line". And for any div tag I use the float option, I can't align the text to anywhere, how can I do this too?
__________________
 Homepage • Blog • Fotolog • GFXartist nzFotolog My own PHP script to manage photoblogs.
|
|
#2
September 4th, 2004, 07:44 PM
|
||||
|
||||
|
Code:
<style>
#contain{text-align:center; margin: 0px auto; /* Centre's container in viewport */}
#left{text-align:left; float:left; width: X%}
#centre{text-align:center;/* Damned American spelling */ float:left; width: X%}
#right{text-align:right; float:left; width: X%}
</style>
<body>
<div id="contain">
<div id="left">LEFT DIV</div>
<div id="centre">CENTRE DIV</div>
<div id="right">RIGHT DIV</div>
</div>
Where X% represents a an equal width for each div. The sum of all X should be < 100%
|
|
#3
September 4th, 2004, 09:07 PM
|
||||
|
||||
|
well... that doesn't do exactly what I want and does not reproduce the same effect as the tables...
first because I don't want the 3 divs to have the total width of the viewport, I want the 3 divs to have (for instance) 300px (not 300px to each but 100px to each) and to be centered on the screen.
|
|
#5
September 4th, 2004, 10:05 PM
|
||||
|
||||
|
if it was that easy...
that is an option and almost works at 100% but the prolbme is, if I set them all to 100px, they will all be aligned in the left and I want the 3 divs to be aligned in the center...
|
|
#7
September 4th, 2004, 10:47 PM
|
||||
|
||||
|
doesn't quite work...
http://nazgulled.home.sapo.pt/divs.html - it's not centered, I need to center this on the screen.
|
|
#8
September 5th, 2004, 01:59 AM
|
||||
|
||||
|
Quote:
You need to set a width. Because other wise you have three floated elements inside of a 100% wide container, meaning that there are no boundaries for the margin. Sorry, that's my fault... in the style selection for #contain add something like: Code:
width:600px; The reason I did it in percentage is so that you would understand that the three widths of the floating divs should be slightly less ( cumulatively speaking ) than that of the container.
__________________
The Standards! CSS 2 - CSS 3 - w3c CSS Validator - XHTML 1.1 - HTML 4.01 - w3c (X)HTML Validator - ActionScript Reference Links! Bert's Door and Lock Service | Brandon Erik Bertelsen | TextPattern
|
|
#9
September 5th, 2004, 04:18 AM
|
||||
|
||||
|
This can only be considered an exercise. Neither Brandon's nor my solution is a real world example. Brandon creates a constraining block element that is centered in the window. Mine simply displays the elements as inline, using text-align to center them.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
text-align: center;
}
.inline {
display: inline;
margin: 5px;
background-color: yellow;
color: black;
}
/*]]>*/
</style>
</head>
<body>
<p class="inline">some text</p>
<p class="inline">some text</p>
<p class="inline">some text</p>
<br />
<div class="inline">
some text
</div>
<div class="inline">
some text
</div>
<div class="inline">
some text
</div>
</body>
</html>
cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#10
September 5th, 2004, 10:07 AM
|
||||
|
||||
|
thank you all... I finally worked it out with your help
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > How to make this simple example with divs/css? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
