Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Content box

  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Content box

    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

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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...

    Code:
    <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:

    Code:
    #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...

  • Users who have thanked Scriptet for this post:

    Preemo (05-27-2010)

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow! Thanks alot mate!

    Yeah, I meant superwebdesign. Sorry lol.

    Really apreciated that is mate!

    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.
    Last edited by Preemo; 05-27-2010 at 06:47 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Yeah if you want the CSS on the same file then you need to have it inside style tags (<style></style>), or if you want it on a seperate external file then you add this inside the HEAD of your document:

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

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You have just made me the happiest man alive! Thanks so much mate! Really appreciated!

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    No problemo mate good luck

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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:

    Code:
    #box1{
    background-image: url('linktoimage.png');
    }
    You can specify all things like its position and whether you want it to repeat or not..

  • Users who have thanked Scriptet for this post:

    Preemo (05-27-2010)

  • #9
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:

    Code:
    #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?

  • #10
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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*/
    }

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nope, still on this :/ http://test.huntswebdesigns.co.uk/

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

  • #12
    New Coder
    Join Date
    May 2010
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, got it working! I found out I was uploading the wrong file.

    Thanks for your brilliant help mate


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •