Alluziion
Privileged
-
Joined
-
Last visited
Solutions
-
Alluziion's post in How to do this? was marked as the answerIt's called a Wrapper.
It's basically one big DIV or (sometimes separated into smaller divs) that contains the all the content of your website.
To create it, all you need to do is create a DIV in your HTML... (as Ryan pointed out).
<body> <div id="wrapper"> <!-- everything inside the white box goes here --> </div> </body>
and in your CSS...
#wrapper { width: 1000px; /* how wide you want the wrapper (white box) to be */ margin: 0 auto; /* this centres the box but a width needs to be defined for it to work */ background: white; /* whatever colour/image you want the box to use */ }
You can add other styles too such as a border or a box-shadow (or no styles and just use it centre your content!).
For the width I'd use something between 1,000px and 960px (I personally would use 1,000px).
Also, if you don't want to get TOO gritty with CSS you could always style it inline (although you should learn to master CSS as it's a necessity in front-end development).
An example of inline style...
<div style="width:1000px; margin:0 auto; background: white;" id="wrapper"> <!-- content --> </div> -
Alluziion's post in Background jpg image takes forever to load on site - what can I do? was marked as the answerIt loads fine by me and 9.83kb is small, I wouldn't worry about it, it should be fine.
Does the background image load slowly for you?
-
Alluziion's post in How Do I Do This? was marked as the answerMost graphics can be recreated with CSS now but it's not always convenient and although they do hold benefits over images in terms of rendering and scaling, they are still time-consuming to make and often result in poor HTML techniques such as empty DIVs so the decision of whether to use an image or recreate something with CSS is often a debatable topic and personally, if it takes roughly the same amount of time or the image needs to be rescaled (such as in RD) then I use CSS otherwise images work just fine.
Thanks! I'm glad that my sleep deprivation was worth the effort lol.
I'll try to add the other features today if possible but not sure when so I'll edit the post when it's done.
As for how to implement it... I'm assuming your new to CSS so learn the language and have a play around as some of the features that I've used are new and relatively advanced (such as gradients and RGBa colours).
To apply it you can either either place the code between <style> tags in your head like this...
<head> <title>Blah</title> <style> /* All Your CSS goes here */ </style> </head>
Or put the code into a separate .css file and reference it in the head like this...
<head> <title>Blah</title> <link rel="stylesheet" href="path/to/stylesheet.css"> </head>
EDIT: Just made some more tweaks, I've attempted to edit the scrollbar but I couldn't do it perfectly without using Javascript and I wanted to maintain CSS purity but hopefully you can view the code and see how things work
http://dabblet.com/gist/5201563
-
A DIV is just a container with the default shape of a box (a square or rectangle depending on the given width and height).
They are used to contain various sections of your website such as a product. You could have the name of the product, an image, a description as well as a rating all included within the DIV like this...
<div> <h3>Product Name</h3> <img src="path.jpg" alt="product image"> <p>Description of Product</p> </div>
That DIV contains all that information so if you wanted to move it all then you would just move DIV (the container that groups everything that's nested within).
I think you've got DIVs mistaken with IDs...
-
Alluziion's post in Border-radius was marked as the answerJust like many other CSS3 properties, they're supported by most of the latest browsers but still require prefixes for slightly older versions.
Check out this compatibility chart: http://caniuse.com/border-radius
It shows which browsers the border-radius is supported in with prefix, without prefix and whether it's not supported at all.
-
Alluziion's post in stretch header/content/footer color over full page but still have everything centered in a fix width was marked as the answerMaybe closing your #content DIV as well as its corresponding #container DIV will help; you've gone straight onto your footer without closing them so technically your footer is being nested within and they aren't being closed.
Like this
<body> <div id="header"> <div class="container"> <img src= "IMAGE" width="429" height="61" /> <!-- header's content here --><p class="fltrt">Contact: 00000000000</p></div> <!-- .container --> </div><!-- #header --> <div id="content"> <div class="container"> <!-- main content here --><h1> Hello!</h1> </div> </div> <div id="footer"> <div class="container"> <!-- footer's content here --><p>Footer1</p> </div><!-- .container --> </div><!-- #footer --> </body>
EDIT: added example.
-
Alluziion's post in CSS Alignment Issue - Need my Nav to align right... was marked as the answerWorked for me using Web Developer plugin.
Maybe it's conflicting with something... try adding !important and see if it works and if it does, try and find out what's overwriting the style.
-
Alluziion's post in How to remove white line between header and navigation? was marked as the answerIn that case maybe Wickham's previous idea would be the only option... try this:
div#wrap2 div.span-24 { margin-top: -3px; }
