Greetz!
Does anyone know how to do this with CSS:
Click to view attachment
A table was used for the above "effect".
Sebastian
Full Version: CSS Design Question
CODE
p {
float: right;
}
float: right;
}
?
QUOTE(Veracon @ Apr 5 2005, 05:46 PM)
CODE
p {
float: right;
}
float: right;
}
?
Well, aligning the text to the right isn't the problem. I was wondering how to make the background of the text (only the text) blue.
CODE
a {
background: #000;
color: #FFF;
padding: 2px;
}
background: #000;
color: #FFF;
padding: 2px;
}
Remove the 2px padding if you want. And #000 is just replaced with the blue colour.
It's not a link...
This code
will make the whole line have a blue background. Any idea how to make only the background of the text in another color?
This code
HTML
h3 {
background-color: #244c66;
border-bottom: 1px solid #244c66;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 2px;
text-align: right;
}
background-color: #244c66;
border-bottom: 1px solid #244c66;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 2px;
text-align: right;
}
will make the whole line have a blue background. Any idea how to make only the background of the text in another color?
Oh, actually, I believe floating it will do the trick since it removes its block-level status.
Can you show us the web site you are working on, or a live demo? I can't quite understand what you want. You were asking on web design advice earlier, so I figured I would give it now. 
Use HTML or XHMTL for content and CSS for structure, tables are for tabular data. Something like this would get you the desired effects, no tables included:
XHTML:
CSS:
Use HTML or XHMTL for content and CSS for structure, tables are for tabular data. Something like this would get you the desired effects, no tables included:XHTML:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tables are evil.</title>
</head>
<body>
<div id="container">
<div id="tab">
Main Features
</div>
<div id="space">
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tables are evil.</title>
</head>
<body>
<div id="container">
<div id="tab">
Main Features
</div>
<div id="space">
</div>
</div>
</body>
</html>
CSS:
CODE
#container {
height: 17px;
margin: 20px auto 0px auto;
width: 500px;
}
#space {
border-bottom: 1px solid #194173;
float: left;
height: 16px;
width: 400px;
}
#tab {
background: #194173;
border-bottom: 1px solid #194173;
color: #FFF;
float: right;
height: 16px;
text-align: center;
width: 100px;
}
height: 17px;
margin: 20px auto 0px auto;
width: 500px;
}
#space {
border-bottom: 1px solid #194173;
float: left;
height: 16px;
width: 400px;
}
#tab {
background: #194173;
border-bottom: 1px solid #194173;
color: #FFF;
float: right;
height: 16px;
text-align: center;
width: 100px;
}
OK, thanks for the info guys. 
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.