PDA

View Full Version : html convert to css



Genie1
Jan 25th, 2009, 06:12 PM
Hello Team,

iv got a slight problem in that, i cant seem how to do this.

For example,

http://img232.imageshack.us/img232/1631/img54rn5.gif

Basically when i do this the text automatically goes where i want it but unfortanley cant do the padding and background as i want to do



<img src="./images/pic.jpg" title="Pic" alt="pic" id="pic" align="top" valign="middle"/> Introduction <br /> Blah blah


But i want to do it something like this



<img src="./images/pic.jpg" title="Pic" alt="Pic" id="Pic"/>
<div id="introduction">Introduction</div></intro>
<div id="rest">blah blah</div>


Thank you :D

_Aerospace_Eng_
Jan 25th, 2009, 06:21 PM
So you want the text to wrap around the image or you want it to start below it?

Excavator
Jan 25th, 2009, 06:44 PM
Hello Genie1,
That bit in red probably needs to go -
<div id="introduction">Introduction</div></intro>

And I'm not sure about putting Introduction into it's own div... sounds like the start of divitis to me. You must have something in mind for it?
Instead, have a look at a tutorial on styling text here: http://www.w3.org/Style/Examples/011/firstcss


try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
font: 100%/100% "Comic Sans MS";
background: #FC6;
text-align: left;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#rest {
width: 800px;
background: #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<img src="../images/pic.jpg" width="200" height="133" title="Pic" alt="pic" id="pic" />
<div id="rest">
<h1>Introduction</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end rest--></div>
<!--end wrap--></div>
</body>


If you want it to wrap around the image like Aero was asking then that's a little different...

Genie1
Jan 25th, 2009, 11:13 PM
Hi.

Thank you for the help,

What i want is that the text to go near the image. and i want to control it so that i can put a background image and also control the text.

Any assistance please

_Aerospace_Eng_
Jan 26th, 2009, 12:03 AM
You need to float the image to the left. This will allow the text to go next to the image. You'll need to give a right margin to the image so the text doesn't sit too close to the image. You can put your intro into a header tag. I suggest you look into semantics.

http://brainstormsandraves.com/articles/semantics/structure/