|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
June 4th, 2004, 04:12 PM
|
|||
|
|||
|
CSS Help with Title Bar Format
Dear Friends,
I have been trying to make a stupid title bar, that i did with tables, now using css. This is what the code for a titlebar looks like in table form: <table width="100%" border="0" cellpadding="0" cellspacing="0"><TR></table><TD width="10"><img src="img_inside_article_title-bar_left.gif" width="10" height="30"></TD><TD colspan=2 height="30" background="tile_inside_article_titlebar_bak.gif"><p class="left"><span class="strong_white"> Title</span></p></TD><TD width="14"></TR><img src="img_inside_article_title-bar_right.gif" width="10" height="30"></TD> and would like to convert it into css. All my attempts have been very wrong, and i need help. I'd give my css code, but it is sooo wrong.......that it would be better to start from scratch. basically this is the idea: (Left Corner Image)(Title area that streaches across width of web page)(Right Corner Image)HELP Fz105
|
|
#2
June 5th, 2004, 01:27 PM
|
|||
|
|||
|
This would do it
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image headers</title>
<style type="text/css">
<!--
.header {
font-size:15pt;
text-align:center;
background: url(tile_inside_article_titlebar_bak.gif);
}
.headerleft {
float: left;
}
.headerright {
float: right;
}
-->
</style>
</head>
<body>
<div class="header">
<img class="headerleft" src="img_inside_article_title-bar_left.gif">
<img class="headerright" src="img_inside_article_title-bar_right.gif">
This is my header
</div>
<div>
<p>This is my body</p>
</div>
</body>
</html>
Mick
|
|
#3
June 5th, 2004, 05:02 PM
|
|||
|
|||
|
Thank you Arnica, this was most helpfull....It works perfectly....
what i was doing was: <div style="float: right"><img src="img1.gif"></div> <div>text for header</div> <div style="float: left"><img src="img2.gif"></div> and what that was doing was makin the right image go onto the next line, onto a new line....so it was driving me nutts... again tanks a bunch. Fz105
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Help with Title Bar Format |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
