Posts: 302
Threads: 82
Joined: Jan 2011
Reputation:
0
I'm really confuse with margin, border and padding.
for example
{padding: 4px 4px 4px 4px}
which 4px represent which side?
here is what i want to look like
![[Image: websiteu.jpg]](http://img853.imageshack.us/img853/2314/websiteu.jpg)
my HTML code (its not complete)
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<div id="container">
<div id="head">
<title>Big Family - Gallery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
</div><!--end head-->
<div id="body">
<div id="menu">
<li id="logo" class="selected"><a href="index.html"><img src="logo.png"></a></li>
<li id="pic"><a href="pictures.html"><img src="pic.png"></a></li>
<li id="vid"><a href="videos.html"><img src="vid.png"></a></li>
<li id="back"><a href="http://www.bigfamily.hourb.com"><img src="back.png"></a></li>
</div><!--end menu-->
</div><!--end body-->
</div><!--end container-->
my css code
/*-------------------*/
/* GENERAL RESET */
/*-------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align: baseline;
background:none;
}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input,textarea,select{
font:11px Arial, Helvetica, sans-serif;
vertical-align:middle;
padding:0;
margin:0;
}
input:focus, textarea:focus {
outline: none;
}
form,fieldset{border-style:none;}
html,
body {
margin:0;
padding:0;
min-height:100%;
}
/*-------------------*/
/* GENERAL SETTINGS */
/*-------------------*/
#menu
{
background-image: url('../header-line.png');
width: 100%;
margin: 0px auto;
display: inline block;
position: relative;
}
#menu#logo
{
}
#menu#pic
{
}
#menu#vid
{
}
#menu#back
{
}
here is what I got with those code
![[Image: screencapture2011129181.png]](http://img534.imageshack.us/img534/9509/screencapture2011129181.png)
how can I make it so those words (those are images) line up like that?[/quote]
Posts: 2,216
Threads: 187
Joined: Jul 2011
12-09-2011, 07:25 PM
(This post was last modified: 12-09-2011, 07:34 PM by BreShiE.)
EDIT: No it wont, can you give me the link to the site of how it SHOULD look please.
Posts: 302
Threads: 82
Joined: Jan 2011
Reputation:
0
nope still not working (too short)
Posts: 2,216
Threads: 187
Joined: Jul 2011
As I said, it wont work.
Please provide me with a live demonstration of the one that does work.
Posts: 302
Threads: 82
Joined: Jan 2011
Reputation:
0
(12-09-2011, 07:33 PM)BreShiE Wrote: As I said, it wont work.
Please provide me with a live demonstration of the one that does work.
It stay the same.
Posts: 2,216
Threads: 187
Joined: Jul 2011
Will you just please link me to the page where it works, thanks.
Posts: 302
Threads: 82
Joined: Jan 2011
Reputation:
0
Posts: 2,216
Threads: 187
Joined: Jul 2011
No, I need the link to the WORKING one.
That one.
Posts: 302
Threads: 82
Joined: Jan 2011
Reputation:
0
That one I made it in Photoshop.
Posts: 2,216
Threads: 187
Joined: Jul 2011
Oh okay, then there's not much I can help you with, sorry.
Try Google'ing it.
|
![[Image: websiteu.jpg]](http://imageshack.us/photo/my-images/853/websiteu.jpg/)
![[Image: screencapture2011129181.png]](http://imageshack.us/photo/my-images/534/screencapture2011129181.png/)
