CSS Forum

**kiwii** · 06-07-2008, 09:36 PM

Guys, I need some help, I'm novice and I was hours trying differents things, but I couldn't achieve it.

When I want to preview the result of the css in a wordpress page, it is not showed like I see it in dreamweaver. Also it shows different in firefox from IE.

On image nº1 you see how it should be, I have done these with dreamweaver.
I also attach at the bottom of these tread the code and an image: 1.jpg

My petition for somebody benevolent who can help me: can somebody correct my suckly css so it works for wordpress?

thanks a lot, greetings from Argentine, Enrique

HOW SHOULD IT BE (done with dreamweaver) (The appearance should be like image nº1)

HTML Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{font-family:Arial;font-size:11px;color:#a8a8a8;background:#151515;margin:0 auto;padding:0;}

.featured {
    background: #0B0B0B;
    border:#111 solid 5px;
    width: 550px;
    height:155px;
    color:#FFF;
    margin: 10px;
    padding: 10px 10px 0px 10px;
    text-align:justify}

.imgg {float: left; margin-right:5px}

h9{color: #2576C8; font-weight:bold; font-size:17px; float:left}

h10{color: #C71F76; font-weight:bold; font-size:17px; float:left}
</style>
</head>

<body>
<div class="featured">
<div class="imgg"><img src="http://127.0.0.1/whiskyy/wp-content/themes/photoblog/images/que-hacemos.jpg" alt="Que Hacemos" width="144" height="143" /></div>
<p><h9>QUE</h9><h10>HACEMOS</h10></p>
<p><br />
  <br />
  Here some introduction. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <span class="style1">b</span>la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla .<br />
  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</p>
</div>

<div class="featured">
<div class="imgg"><img src="http://127.0.0.1/whiskyy/wp-content/themes/photoblog/images/quienes-somos.jpg" alt="Quienes Somos" width="144" height="143" /></div>
<p><h9>QUIENES</h9><h10>SOMOS</h10></p>
<p><br />
  <br />
  Here some introduction. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla .</p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</p>
</div>
</body>
</html>

**Arenlor** · 06-07-2008, 10:05 PM

There is NO h9 nor h10! http://www.w3.org/TR/html4/struct/global.html#h-7.5.5
Do NOT use headers for styling!
Why are you floating everything left?

HTML Code:

h9{color: #2576C8; font-weight:bold; font-size:17px; float:left}
h10{color: #C71F76; font-weight:bold; font-size:17px; float:left}
<!--Use instead-->
span.left {color: #2576C8; font-weight:bold; font-size:17px; float:left}
span.right {color: #C71F76; font-weight:bold; font-size:17px; float:left}

You'll of course need to change the h9 and h10. Where did you get the idea there were more headers than 6?

**kiwii** · 06-12-2008, 10:32 PM

thank you so much ARENLOR, as you see me knowledge about css is very bad heh.

Is there any problem if I contact you in the future for any other question? Actually im finishing my examinations in the uni, and after that im going to star a templete from 0, and sure im going to need some guide sometimes

thanks

**Arenlor** · 06-13-2008, 12:34 AM

If you have questions just ask them here so others can learn.