...

View Full Version : Content box



Preemo
05-27-2010, 06:08 PM
Hello,

I am a beginner with HTML, CSS and the rest. I understand the basics, then, one more word, and I'm confused like hell!

Basically, like this site here: http://superwebdesigns.co.uk I want 3 boxes, with writing over the top of them.

How would I do this? Please explain an advanced answer please :)

Thanks,
Ryan

Scriptet
05-27-2010, 06:39 PM
HTML and CSS becomes easier with practice, and be sure to learn the correct techniques to do things not outdated methods!

The link you posted doesn't work, i'm guessing you meant superwebdesign not designs?

Anyway it's simple as having 3 DIV's with text inside...



<div id="box1">
<p>My Text</p>
</div>
<div id="box2">
<p>My Text</p>
</div>
<div id="box3">
<p>My Text</p>
</div>


Then you can control the presentation of these boxes using CSS like:



#box1, #box2, #box3{
float:left; /*So the boxes appear side by side*/
width:200px; /*Width of each box*/
margin:20px; /*Gap around each box*/
background:blue; /*bg colour of boxes*/
color:#FFF; /*color of text*/
}


Because DIV's each appear on their own line, we can add float:left so they float next to each other rather than each on their own line..

Also for basic tutorials check out:
Tizag HTML and CSS step by step begginer tutorials
http://www.tizag.com/htmlT/
http://www.tizag.com/cssT/

W3Schools HTML and CSS step by step begginer tutorials
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp

They are great and don't take long to go through, but sorry if I covered anything you already knew...

Preemo
05-27-2010, 06:44 PM
Wow! Thanks alot mate!

Yeah, I meant superwebdesign. Sorry lol.

Really apreciated that is mate! :D

Is there anything particular I start the CSS code off with? As when I copied and pasted that CSS code into the same folder as my HTML file, it doesn't work. :)

Scriptet
05-27-2010, 06:57 PM
Yeah if you want the CSS on the same file (http://www.tizag.com/cssT/internal.php) then you need to have it inside style tags (<style></style>), or if you want it on a seperate external file (http://www.tizag.com/cssT/external.php)then you add this inside the HEAD of your document:

<link rel="stylesheet" type="text/css" href="test.css" />

Preemo
05-27-2010, 07:01 PM
You have just made me the happiest man alive! Thanks so much mate! Really appreciated!

Scriptet
05-27-2010, 07:04 PM
No problemo mate good luck :thumbsup:

Preemo
05-27-2010, 07:12 PM
Sorry to be a pain in the arse, but say I have a background image I want to put as the boxes background, how do I do this? :)

Scriptet
05-27-2010, 07:27 PM
See here: http://www.w3schools.com/css/css_background.asp

So if you wanted the bg image for box 1 you'd add this to your CSS:



#box1{
background-image: url('linktoimage.png');
}


You can specify all things like its position and whether you want it to repeat or not..

Preemo
05-27-2010, 07:39 PM
Hmm, I'm just not getting the hang of this like I thought.

I added that code, however, it just stays the same.

At the moment (after editing it, trying to make it work!) I have:


#box1, box2{
background-image: url('http://i575.photobucket.com/albums/ss195/RuddyRyan/background.gif');
float:left; /*So the boxes appear side by side*/
width:250px; /*Width of each box*/
margin:350px; /*Gap around each box*/
body { background-image:url('images/background.gif');} /*bg colour of boxes*/
color:#FFF; /*color of text*/
}

I take it that's completely wrong?

Scriptet
05-27-2010, 08:38 PM
This should work:

#box1, #box2{
float:left; /*So the boxes appear side by side*/
width:250px; /*Width of each box*/
margin:350px; /*Gap around each box*/
background-image:url('http://i575.photobucket.com/albums/ss195/RuddyRyan/background.gif'); /*bg of boxes*/
color:#FFF; /*color of text*/
}

Preemo
05-27-2010, 08:46 PM
Nope, still on this :/ http://test.huntswebdesigns.co.uk/

Is there any special dimensions I have to put in with my Image size?

Preemo
05-27-2010, 10:41 PM
Sorry, got it working! I found out I was uploading the wrong file.

Thanks for your brilliant help mate :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum