JavaScript and client side scripting.
Moderator: General Moderators
Toneboy
Forum Contributor
Posts: 102 Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:
Post
by Toneboy » Sun Aug 07, 2005 12:31 pm
Trying to go from
this to something more like
this .
Am trying to put the "insert smart comment here" right alongside the logo though, and can't get it to go there without using an absolute value. Is that the only way to put two divs right adjacent to one another?
Here's the code for my CSS thus far:
Code: Select all
body {
margin:0px;
padding:0px;
font-family:helvetica, verdana, arial, sans-serif;
color:#000000;
background-color:white;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#FF0000;}
a:visited {color:#FF0000;}
a:hover {background-color:#FFFFFF;}
#content {
margin:0px 0px 0px 0px;
padding:10px;
}
#quote {
position:absolute;
top:0px;
left:500px;
margin:0px 0px 0px 0px;
padding:10px;
}
#logo {
margin:0px 0px 0px 0px;
padding:10px;
}
#navbar {
margin:0px 10px 10px 10px;
padding:0px;
background-color:#FFFF00;
}
The section in question is the #quote section.
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Sun Aug 07, 2005 2:45 pm
in the past, I've done something like the following to get two div's side-by-side:
Code: Select all
<html>
<style>
.container
{
width: 100%;
height: 50px;
}
.core
{
width: 100%;
height: 100%;
background-color: orange;
}
.left
{
float: left;
width: 50%;
height: 100%;
background-color: yellowgreen;
margin-right: -1px;
}
.right
{
float: right;
width: 50%;
height: 100%;
background-color: red;
margin-left: -1px;
}
.clear
{
clear: both;
}
</style>
<body>
<div class="container">
<div class="core">
<div class="right">Right Column</div>
<div class="left">Left Column</div>
<!--<div class="clear"></div>-->
</div>
</body>
</html>
quickly tested in IE 6.0.2900 SP2 and Firefox 1.0.6
hopfateam
Forum Newbie
Posts: 12 Joined: Sun May 29, 2005 6:30 pm
Location: Germany
Contact:
Post
by hopfateam » Sun Aug 07, 2005 4:53 pm
Or try it like this this:
Code: Select all
.div1{float:left;width:500px;}
.div2{float:left;width:100px;}
This should place those to divs next to each other, if up-level div/table has minimum width of 600px, otherwise just fix the numbers
Devnull
Forum Commoner
Posts: 52 Joined: Fri Oct 22, 2004 2:19 pm
Post
by Devnull » Mon Aug 08, 2005 5:02 am
If you're a newbie at this CSS thing I can reccomend you a really good site;
HTML Dog .
Toneboy
Forum Contributor
Posts: 102 Joined: Wed Jul 31, 2002 5:59 am
Location: Law, Scotland.
Contact:
Post
by Toneboy » Mon Aug 08, 2005 7:04 am
Very useful, thanks everyone.
The HTML Dog link is especially useful. I'm especially pleased that the answers I'm looking for are in the "advanced" section*.
(Yes, I should have put a reference to css
layouts in the thread title.)
theda
Forum Contributor
Posts: 332 Joined: Sat Feb 19, 2005 8:35 am
Location: USA
Post
by theda » Mon Aug 08, 2005 7:45 am
It's nice to see you convert to CSS layouts, although confusing as it is... I use it, makes my site look snazzy... Then again, if the CSS layouts don't load, then... Oops. garbled page! (But content still readable...)