Hi, i am trying to make my text go evenly across the div, the div is at 100% and there are four words.
These four words need to be evenly spread across the 100% div.
I cant seam to figure this out?
#textframe {
width: 100%;
}
.bannerlinks {
color:#000000;
font-weight: bold;
font-family: Arial;
text-decoration:none;
margin-left: 22px;
}
...
<div id="textframe">
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
</div>
an example of this is the four links below the logo here: -
<!-- m --><a class="postlink" href="http://www.private.apc-compunet.co.uk/websites/globe-financial/main/equity/equity.php">http://www.private.apc-compunet.co.uk/w ... equity.php</a><!-- m -->
Thanks
AdamThis should work just fine:
#textframe { text-align: justify; }
Now you don't need the margin on .bannerLinks.Originally posted by toicontien
This should work just fine:
#textframe { text-align: justify; }
Now you don't need the margin on .bannerLinks.
I don't believe this will work for a 1-line entity, as the last (or only) line of a justified paragraph will be displayed left-aligned.You could approximate the effect with something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
.nav {
width: 98%;
text-align: center;
white-space: nowrap;
background-color: silver;
border: outset thin;
margin: 0 auto;
}
.nav a {
font-weight: bold;
font-family: Arial;
text-decoration: none;
color: black;
width: 13%;
margin:0 8%;
}
.nav a:hover {
color: cyan;
}
</style>
</head>
<body>
<p class=nav>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
</p>
</body>
</html>Hi, that doesn't work im afraid?
I need the spacing like it is in the link as well?Originally posted by k0r54
Hi, that doesn't work im afraid?
I need the spacing like it is in the link as well?
If you need things positioned exactly at some location of the page, I think you either need to (a) use CSS absolute positioning, or (b) rethink your design priorities.I pick (b).
Hi, thank you, im sorry but i missed your previous thread! i have used that code and works fine now
Thanks nog dogOriginally posted by k0r54
Hi, thank you, im sorry but i missed your previous thread! i have used that code and works fine now
Thanks nog dog
Note that as you change the lengths of the actual link texts, you'll probably need to play around with the last value in "margin: 0 8%". Also note that the width I put in there probably is having no effect (it's just left over from failed experiment A, B, C, or D ).Thanks
Ok i really need to validate this code now, how can i do that, there is a w3c validator isn't there.
I really need to make this cross browser, but it is my first real site in CSS so its ok
Thanks
<!-- m --><a class="postlink" href="Adamhttp://validator.w3.org/Originally">Adamhttp://validator.w3.org/Originally</a><!-- m --> posted by Triumph
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
Then, once your markup is valid, validate your CSS with <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> .
These four words need to be evenly spread across the 100% div.
I cant seam to figure this out?
#textframe {
width: 100%;
}
.bannerlinks {
color:#000000;
font-weight: bold;
font-family: Arial;
text-decoration:none;
margin-left: 22px;
}
...
<div id="textframe">
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php' class='bannerlinks'>Home</a>
</div>
an example of this is the four links below the logo here: -
<!-- m --><a class="postlink" href="http://www.private.apc-compunet.co.uk/websites/globe-financial/main/equity/equity.php">http://www.private.apc-compunet.co.uk/w ... equity.php</a><!-- m -->
Thanks
AdamThis should work just fine:
#textframe { text-align: justify; }
Now you don't need the margin on .bannerLinks.Originally posted by toicontien
This should work just fine:
#textframe { text-align: justify; }
Now you don't need the margin on .bannerLinks.
I don't believe this will work for a 1-line entity, as the last (or only) line of a justified paragraph will be displayed left-aligned.You could approximate the effect with something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
.nav {
width: 98%;
text-align: center;
white-space: nowrap;
background-color: silver;
border: outset thin;
margin: 0 auto;
}
.nav a {
font-weight: bold;
font-family: Arial;
text-decoration: none;
color: black;
width: 13%;
margin:0 8%;
}
.nav a:hover {
color: cyan;
}
</style>
</head>
<body>
<p class=nav>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
<a href='http://www.webdeveloper.com/forum/archive/index.php/main/home.php'>Home</a>
</p>
</body>
</html>Hi, that doesn't work im afraid?
I need the spacing like it is in the link as well?Originally posted by k0r54
Hi, that doesn't work im afraid?
I need the spacing like it is in the link as well?
If you need things positioned exactly at some location of the page, I think you either need to (a) use CSS absolute positioning, or (b) rethink your design priorities.I pick (b).
Hi, thank you, im sorry but i missed your previous thread! i have used that code and works fine now Thanks nog dogOriginally posted by k0r54
Hi, thank you, im sorry but i missed your previous thread! i have used that code and works fine now
Thanks nog dog
Note that as you change the lengths of the actual link texts, you'll probably need to play around with the last value in "margin: 0 8%". Also note that the width I put in there probably is having no effect (it's just left over from failed experiment A, B, C, or D
).ThanksOk i really need to validate this code now
, how can i do that, there is a w3c validator isn't there.I really need to make this cross browser, but it is my first real site in CSS so its ok
Thanks
<!-- m --><a class="postlink" href="Adamhttp://validator.w3.org/Originally">Adamhttp://validator.w3.org/Originally</a><!-- m --> posted by Triumph
<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->
Then, once your markup is valid, validate your CSS with <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a><!-- m --> .