Move the background to left?

[Cryptex]

Hey,
im new in css and testing something.
I will do that.

I have now
My header code:
#header { background: #6a0202; width: 245px; height: 25px; float: left;
color: #FFF; font-size:30px; padding: 10px }
PICTURE 1

I will do
Picture 2

Can anyone help me? :)

peace

[Cryptex]

nobody can help ? :/

[lyleyboy]

I think you need to give more detail.

Can you post your code? or a link to the site?

[ylex1]

I think you can also give it a margin-left: -10px;

[Cryptex]

ouuu thx for the help…
so its now left but it is possible to make the fiel behind the other one?

here is the test website..

http://xtreme-designs.de/testali/

[Cryptex]

thx wlfcry911 :)
now its valide too ^^

http://xtreme-designs.de/testali/

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fxtreme-designs.de%2Ftestali&profile=css3&usermedium=all&warning=1&vextwarning=

now im not the best css coder to see how to use another tags as divs :/
did you have sites to learn to use different tags for different situations

peace

[chrisburton]

Your simple layout seems a little more problematic than just using margins to try to fix everything. Floats cleared? Why all the negative margins?

[Cryptex]

why problematic?
why not negative margins? WC3 shows no problems :/

can u show an idea how it is right? :/

[chrisburton]

It may show validation however the markup is not correctly structured. To start off you need to rid the unnecessary div that I quickly saw after skimming the code and clear your floats.

[Cryptex]

hmm u mean with unnecassary div´s like

div id=”main-trenner”

#main-trenner { background: #000; width: 730px; height: 15px }

to make the black a black area to show a separation between the slider an the content?
i dont know how to part it in another way?! :/

can u help me? :)

[chrisburton]

Copy/Paste this. Even though I don’t agree with my code and starting from scratch may be the appropriate action.

*			{ margin: 0; padding: 0; }

body			{ font-family: Georgia, serif; color: #FFF;

background: #FFF }



#page-wrap		{ width: 800px; margin: 0 auto; padding: 0;  }



#header			{ background: #6a0202; width: 275px; height: 20px; float: left;

color: #FFF; line-height: 40px; font-size:30px; margin: 0 auto;

padding: 20px; text-align: center; }



nav a 			{width: 100px;}



a.cta 			{  width: 100px; color:#000; height:45px; float: left;

line-height:60px; text-decoration:none; font-size:20px; font-weight:bold;

text-align:center; }



a:hover.button 		{ color:#6a0202; }



nav img 		{ border: none;	margin: 0 auto; }

nav a:hover img 	{ margin-top: -45px; }



#main-bg		{ background: #000; width: 750px; margin: 0 auto; padding: 10px;  clear: both; }

#main-slider		{ background: #6a0202; width: 730px; padding: 10px; }

#main-trenner		{ background: #000; width: 730px; height: 10px; }

#main-content		{ background: #6a0202; width: 730px; padding: 10px; }

#main-footer		{ width: 700px;  color: #000; text-align: right; }



p			{ line-height: 20px; margin: 0 auto;}

[Cryptex]

ohh thx for your time to help :)
i have.. now its look like

http://xtreme-designs.de/testali/

the header must behind the contentslider

[chrisburton]

Not sure what you mean but here is an edit to the code above. Replace this code with the old.

*                       { margin: 0; padding: 0; }

body                    { background: #FFF; font-family: Georgia, serif; }



#page-wrap              { width: 800px; margin: 0 auto; padding: 0; }



#header                 { background: #6a0202; width: 275px; height: 20px; float: left;

color: #FFF; line-height: 40px; font-size:30px; margin: 0 auto;

padding: 20px; text-align: center; }



nav a                   { }



a.cta                   {  width: 100px; color:#000; height:45px; float: left;

line-height:65px; text-decoration:none; font-size:20px; font-weight:bold;

text-align:center; }



a:hover.button          { color:#6a0202; }



nav img                 { }

nav a:hover img         { }



#main-bg                { background: #000; width: 100%; margin:0 auto; padding: 20px 0; clear: both;}

#main-slider            { background: #6a0202; width: 730px; margin:0 auto; padding: 10px; }

#main-content           { background: #6a0202; width: 730px; color: #FFF; margin: 20px 0 0 25px; padding: 10px; }

#main-footer            { width: 800px; color: #000; margin: 0 auto; text-align: right;}



p                       { line-height: 20px; margin: 0;}

[chrisburton]

Referring to what wolfcry has stated which is correct, you have HTML5 elements in an xHTML document. If you want to use HTML5, you need to change your doctype.

[Cryptex]

i repace it… hmm it looks different now :)
i mean like here

http://img69.imageshack.us/img69/7274/88258899.jpg

the background of the logo must a little bit left an a litte blit down like on the screenshoot

[Author]

Posts