...

View Full Version : Small css help please



zoe20
10-28-2009, 04:47 PM
hi i want to add text on the header i added the screen shot of the image. And i also tried with out any success . please some one help me fix this please. Any help will be highly appreciated.

regards
zoe

This is the one am trying to add the text on my header image.
http://i38.tinypic.com/2n1s05.jpg

This is the Live demo
Click Here For Live Demo (http://hook4adesign.com/zz/test.htm)

This is the xhtml


<div id="banner">
<div class="texthold">
<div class="lq"></div><br />
<div class="tholdtext">Lorem Ipsum Doler Sit amet, Consecuter adipicising elit m said diam
nonummy nibh wuismod tincidunt ut. Lorem Ipsum doler sit </div>
<div class="rq"></div>
</div>
</div>

This is the css

#banner{
background: url(../images/banner.png) no-repeat;
height: 210px;
width: 1006px;
}
.texthold{
float: right;
height: 174px;
width: 336px;
margin-top: 15px;
margin-left: 10px;
position: relative;
right: 16px;
padding: 5px;
}
.rq{
background: url(../images/rq.png) no-repeat;
float: right;
width: 32px;
position: relative;
top: 35px;
}
.tholdtext{
font: bold 18px "Adobe Caslon Pro";
color: #FFFFFF;
text-decoration: none;
position: relative;
margin-right: auto;
margin-left: auto;
padding: 5px;
}
.lq{
background: url(../images/lq.png) no-repeat;
float: left;
width: 32px;
}

This is the left quote png image
http://i35.tinypic.com/2hwvtg.jpg

This is the right quote png image
http://i34.tinypic.com/35bze4y.jpg

SB65
10-28-2009, 05:02 PM
Text looks OK to me...

...or is it the absence of the quotes (in FF) that's the problem? If so, try adding height:21px to your css for .lq and .rq.

zoe20
10-28-2009, 05:17 PM
Text looks OK to me...

...or is it the absence of the quotes (in FF) that's the problem? If so, try adding height:21px to your css for .lq and .rq.

ok i added the heights to both . please see still having trouble

regards

Click Here (http://hook4adesign.com/zz/test.htm)

Excavator
10-28-2009, 05:22 PM
Hello zoe20,
That's a lot of divs there. See divitis (http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/).
Maybe you could try a new approach, something like this:

CSS I changed
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html,body{
background: #F8F8F8 0px 0px;
margin: 0px;
padding: 0px;
}
.../ snip /...
#banner{
background: url(http://hook4adesign.com/zz/images/banner.png) no-repeat;
height: 210px;
width: 1006px;
}
.texthold{
float: right;
height: 174px;
width: 336px;
margin-top: 15px;
margin-left: 10px;
position: relative;
right: 16px;
padding: 5px;
}
h1{
font: bold 18px "Adobe Caslon Pro";
color: #FFFFFF;
text-decoration: none;
position: relative;
margin-right: auto;
margin-left: auto;
padding: 5px 5px 0;
}
.lq {
margin: 5px 0 0 0;
}
.rq {
float: right;
margin: 0 10px 0 0;
}#main{
background: Transparent url(../images/main_bg.png) repeat-y;
height: 400px;
width: 1006px;
}
#footer{

And the markup to go with that -

<div id="wrapper">
<div id="topheader">
<div class="logo"><a href="index.htm"><img src="images/logo.png" border="0"></a></div>
</div>
<div id="nvbar"></div>
<div id="banner">

<div class="texthold">

<img src="http://hook4adesign.com/zz/images/lq.png" alt="quote" width="32" height="21" class="lq">
<h1>
Lorem Ipsum Doler Sit amet, Consecuter adipicising elit m said diam
nonummy nibh wuismod tincidunt ut. Lorem Ipsum doler sit
</h1>
<img src="http://hook4adesign.com/zz/images/rq.png" alt="quote" width="32" height="21" class="rq">

</div>

</div>
<div id="main"></div>
<div id="footer"></div>



</div>

SB65
10-28-2009, 05:26 PM
ok i added the heights to both . please see still having trouble


Are you sure? I can see the quotes in FF now.

zoe20
10-28-2009, 05:50 PM
Hello zoe20,
That's a lot of divs there. See divitis (http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/).
Maybe you could try a new approach, something like this:

CSS I changed
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html,body{
background: #F8F8F8 0px 0px;
margin: 0px;
padding: 0px;
}
.../ snip /...
#banner{
background: url(http://hook4adesign.com/zz/images/banner.png) no-repeat;
height: 210px;
width: 1006px;
}
.texthold{
float: right;
height: 174px;
width: 336px;
margin-top: 15px;
margin-left: 10px;
position: relative;
right: 16px;
padding: 5px;
}
h1{
font: bold 18px "Adobe Caslon Pro";
color: #FFFFFF;
text-decoration: none;
position: relative;
margin-right: auto;
margin-left: auto;
padding: 5px 5px 0;
}
.lq {
margin: 5px 0 0 0;
}
.rq {
float: right;
margin: 0 10px 0 0;
}#main{
background: Transparent url(../images/main_bg.png) repeat-y;
height: 400px;
width: 1006px;
}
#footer{

And the markup to go with that -

<div id="wrapper">
<div id="topheader">
<div class="logo"><a href="index.htm"><img src="images/logo.png" border="0"></a></div>
</div>
<div id="nvbar"></div>
<div id="banner">

<div class="texthold">

<img src="http://hook4adesign.com/zz/images/lq.png" alt="quote" width="32" height="21" class="lq">
<h1>
Lorem Ipsum Doler Sit amet, Consecuter adipicising elit m said diam
nonummy nibh wuismod tincidunt ut. Lorem Ipsum doler sit
</h1>
<img src="http://hook4adesign.com/zz/images/rq.png" alt="quote" width="32" height="21" class="rq">

</div>

</div>
<div id="main"></div>
<div id="footer"></div>



</div>


Thanks a lot and i edited it and still the right quote image is not positioned properly. Any thing wrong? Plz see the demo (http://hook4adesign.com/zz/test.htm)

Excavator
10-28-2009, 06:31 PM
You didn't add the reset -
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
html,body{
background: #F8F8F8 0px 0px;
margin: 0px;
padding: 0px;
}

Have a look at an explanation of that reset here - http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum