PDA

View Full Version : insert image in three cloumn fluid layout



tjustleft
10-28-2007, 02:05 AM
Hello everyone.

Please bear with me as I am new to css and have just started figuring html.

I am editing the three column fluid,fluid,fluid layout from dynamicdrive.

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/ (http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/)

I want to replace the h1 in the header with a 500 x 121 image. I am not sure where to place the code for it. In Kompozer I tried to insert image but I found that the header needs to be resized as the image just runs out of it. As usual with me I hope I explained that correctly. Sometimes I have trouble explaining what's in my head.:)

Here is the css code of the layout.

Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.3- (Fluid-Fluid-Fluid)</title>
<style type="text/css">


body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 15% 0 20%; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 20%; /*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 15%; /*Width of right column in pixels*/
margin-left: -15%; /*Set margin to that of -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" "<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.3- (Fluid-Fluid-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>15%</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>

insanemonkey
10-28-2007, 06:31 AM
try this code..
put this where the header is..
<img src="yourimage.jpg" width="100%"> <--that works best with tables...

but if that doesn't work try this..
<img src="yourimage.jpg" width="500">

tjustleft
10-30-2007, 03:43 AM
Thanks for the info insanemonkey.
I had to take your suggestion and change it a bit for this layout.
I got rid of the inertube div from the header then had to replace the dive tags with span tags.
I'm not sure if that is because of the layout or because I am doing it wrong. I am a slow learner. I know little of html and am just now looking at css.

In any case thanks for the help.