Jump to content
Please Use CODE Tags

HTML/CSS help :)

Flanelman
By Flanelman
in Programming
 Share
Posted

I want to just design like the shell of a basic website (for practice) and i kind of want to have it in 3 sections, so i want there to be a section at the top with the title in it, then a section for the main body and then everywhere that isn't occupied with them i want an image, like in the image I've masterfully created in paint below, i was wondering how to do that :) i know how to put margins and put an image in the background etc but i don't know how to have a centralized body/header with a background image that is separate to these two. :)

i also want to be able to put images into these parts, so not just inserting a blank white space in the middle of the page :)

thanks in advance! :D

post-183800-0-12622000-1438327304.png

post-183800-0-12622000-1438327304.png

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Use dem divs, what program are you using?

If you want to reply back to me or someone else USE THE QUOTE BUTTON!                                                      
Pascal laptops guide

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Use dem divs, what program are you using?

I'm using notepad++ atm :) can you give an example of how to do this with a div? thanks :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I'm using notepad++ atm :) can you give an example of how to do this with a div? thanks :)

 

Gimme a sec..

 

<html>
  <head>
    <title>Example Page</title>
  </head>
  <body style="background-color:gray">
    <div id="header" style="background-color:white;width:800px;margin-left:auto;margin-right:auto;margin-top:25;margin-bottom:10;height:auto">
      <p>Test Text, though this would really be an image or something</p>
    </div>
    <div id="body" style="background-color:white;margin-left:auto;margin-right:auto;width:800px;min-height:300px;margin-top:0;margin-bottom:25">
      <p>More text! This time its in the body!</p>
    </div>
  </body>
</html>
 
The header div will get taller/shorter depending on how much stuff is in it, and the body will do the same, but will stay at least 300px tall.
 
Then in your CSS file you'll want to add padding for the text elements and such so they're not right on the edge. I wouldn't recommend adding the padding to the div itself as that causes it to grow slightly and works kinda funky.

Specs: CPU - Intel i7 8700K @ 5GHz | GPU - Gigabyte GTX 970 G1 Gaming | Motherboard - ASUS Strix Z370-G WIFI AC | RAM - XPG Gammix DDR4-3000MHz 32GB (2x16GB) | Main Drive - Samsung 850 Evo 500GB M.2 | Other Drives - 7TB/3 Drives | CPU Cooler - Corsair H100i Pro | Case - Fractal Design Define C Mini TG | Power Supply - EVGA G3 850W

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I'm using notepad++ atm :) can you give an example of how to do this with a div? thanks :)

Haven't done that in notepad before sadly.

If you want to reply back to me or someone else USE THE QUOTE BUTTON!                                                      
Pascal laptops guide

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

 

Gimme a sec..

 

<html>
  <head>
    <title>Example Page</title>
  </head>
  <body style="background-color:gray">
    <div id="header" style="background-color:white;width:800px;margin-left:auto;margin-right:auto;margin-top:25;margin-bottom:10;height:auto">
      <p>Test Text, though this would really be an image or something</p>
    </div>
    <div id="body" style="background-color:white;margin-left:auto;margin-right:auto;width:800px;min-height:300px;margin-top:0;margin-bottom:25">
      <p>More text! This time its in the body!</p>
    </div>
  </body>
</html>
 
The header div will get taller/shorter depending on how much stuff is in it, and the body will do the same, but will stay at least 300px tall.
 
Then in your CSS file you'll want to add padding for the text elements and such so they're not right on the edge. I wouldn't recommend adding the padding to the div itself as that causes it to grow slightly and works kinda funky.

 

yay that's what i was after! thank you!  :D is there anyway to manually tell it how big to be? because i want the body do go right to the bottom of the page :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

yay that's what i was after! thank you!  :D is there anyway to manually tell it how big to be? because i want the body do go right to the bottom of the page :)

Yeah, just add ";height:X amount of pixels, or X%" after the margin-bottom:25 style tag for the body.

 

I think setting it to 100% height would do it.

Specs: CPU - Intel i7 8700K @ 5GHz | GPU - Gigabyte GTX 970 G1 Gaming | Motherboard - ASUS Strix Z370-G WIFI AC | RAM - XPG Gammix DDR4-3000MHz 32GB (2x16GB) | Main Drive - Samsung 850 Evo 500GB M.2 | Other Drives - 7TB/3 Drives | CPU Cooler - Corsair H100i Pro | Case - Fractal Design Define C Mini TG | Power Supply - EVGA G3 850W

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Yeah, just add ";height:X amount of pixels, or X%" after the margin-bottom:25 style tag for the body.

 

I think setting it to 100% height would do it.

okay, thanks a lot man appreciate it :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

okay, thanks a lot man appreciate it :)

 

Yw :P

Specs: CPU - Intel i7 8700K @ 5GHz | GPU - Gigabyte GTX 970 G1 Gaming | Motherboard - ASUS Strix Z370-G WIFI AC | RAM - XPG Gammix DDR4-3000MHz 32GB (2x16GB) | Main Drive - Samsung 850 Evo 500GB M.2 | Other Drives - 7TB/3 Drives | CPU Cooler - Corsair H100i Pro | Case - Fractal Design Define C Mini TG | Power Supply - EVGA G3 850W

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

in my CSS code i have put this:
 

 p1{
        color: black;
        font-size: 25px;
        text-align: center;
  p1 {

but the only one of them three that actually takes effect is the color, does anyone know why? :(
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Here is a quick solution that works and uses HTML5.

 

The HTML code:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>Example Page</title>  <meta name="description" content="Example">  <meta name="author" content="Me">  <link rel="stylesheet" href="link_to_your_Stylesheet"></head><body>    <header><!-- Your header Content Here --></header>  <main><!-- Your main content here --></main>  <footer><!-- Your Footer Content here --></footer></body></html>

The CSS code:

body{  background-color: blue;  margin:0;  padding:10px;}header,main,footer{  position: relative;  display:block;    /* Width & height */  width:100%;  max-width: 500px;  height: auto;  min-height: 50px;  /*Center*/  margin:auto;  margin-bottom:20px;    /*Padding*/  box-sizing: border-box;  padding: 10px;  /*Color*/  background-color: white;}

Business Management Student @ University St. Gallen (Switzerland)

HomeServer: i7 4930k - GTX 1070ti - ASUS Rampage IV Gene - 32Gb Ram

Laptop: MacBook Pro Retina 15" 2018

Operating Systems (Virtualised using VMware): Windows Pro 10, Cent OS 7

Occupation: Software Engineer

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×