Basic HTML and CSS help URGENTLY required
- Thread starter Shuuya
- Start date
Inori Yusuriha
Member
HashiraMadara
Active member
Do you really need the image that size? First, don't put the image in the <p> tag. Include it in a div befor the <p>. Also, <div> don't clamp to the size of <img>, so you either force it with width and height on the <div<, or on the image, or both. There's lots of solutions for this problems, and I didn't read all the thing (because it's not well written), so I'm not going into much detail.
But, for html, css and javascript, there's no better site than this:
Follow the html and css tutorial (they're quick), and you shouldn't have problems, trust me.
Also, html and css are not coding. Coding is for programming languages.
But, for html, css and javascript, there's no better site than this:
You must be registered for see links
Follow the html and css tutorial (they're quick), and you shouldn't have problems, trust me.
Also, html and css are not coding. Coding is for programming languages.
~Puppet Master~
Active member
I screwed around a little and basically recreated that particular part of the site.
It's always best to be as simple as possible, and don't be afraid to use a crap ton of divs.
I can't really find why yours is wrong, hence why it's always good to be as simple as possible, sometimes it's even better to start from scratch.
It's always best to be as simple as possible, and don't be afraid to use a crap ton of divs.
Code:
<HTML>
<HEAD>
<link href="style.css" rel="stylesheet" />
</HEAD>
<BODY>
<!-- Everything is inside the container div -->
<div class="container">
<!-- Inside, there is another image div -->
<div class="img-container">
<img src="http://indianapublicmedia.org/support/files/2011/09/04_03_1-Stock-Market-Prices_web.jpg" class="stock-image" />
</div>
<!-- And a text div -->
<div class="text-container">
<h2>Article title</h2>
<p>Here is some text</p>
</div>
</div>
</BODY>
</HTML>
Code:
body {
font-family: Calibri;
}
.container {
background-color: #464f58;
width: 800px;
height: 200px;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
.stock-image {
width: 300px;
height: 200px;
}
.img-container {
position: relative;
float: left;
}
.text-container {
position: relative;
float: left;
text-align: left;
margin-left: 5px;
}