Forums

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?

wolfcry911

#header { 
  background: #6a0202;
  width: 245px;
  height: 25px;
  float: left;
  color: #FFF;
  font-size: 30px;
  padding: 10px;
  position: relative; /* <-- add this and the next line */
  left: -10px; /* <-- good practice to use the semi-colon on the last rule */
  }

ylex1

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

wolfcry911

yes, that's true ;)

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/

wolfcry911

In this case it would be better to use ylex1's idea and switch from relative positioning to using a negative margin. You could then use a negative top margin on the main-bg div to bring it up over the header div

#header { margin: 0 0 0 -20px; }
#main-bg { margin: -20px 0 0 0; }

Also, don't fall into the trap of using divs for everything. Mark up the content as semantically as possible. The #header div should really be hx tags. And don't forget to validate - nav is not a valid element under xhtml

Cryptex

thx wlfcry911 :)
now its valide too ^^

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

http://jigsaw.w3.org/css-validator/validator?uri=http://xtreme-designs.de/testali&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

wolfcry911

your css is valid, but your (x)html is not

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

chrisburton

What browser are you using to view the website?

Cryptex

FF 4.0 and IE 8.0

chrisburton

Ok, I am using Firefox 4 to edit the code. Therefore, I'm guessing the problem is once again Internet Explorer?

Cryptex

no i see the problem on FF4
i show u what i see ond FF4 and what i want.

what i see now with your code
http://img840.imageshack.us/img840/5517/34478214.jpg

i need (my old code)
http://img219.imageshack.us/img219/807/41933563.jpg

chrisburton

Ok I replaced the code above to how it looked before. I must have forgotten to edit a few things back such as the color of the text and the spacing between the content. However, in Firefox 4, I see the logo is aligned correctly.

Cryptex

hmm now its better.. only the logo is right befor...
if i use the code by wolfcry911

#header { margin: 0 0 0 -20px; }
#main-bg { margin: -20px 0 0 0; }

the logo shows right with IE8 and FF4.0

buts its not goot to use a negative margin right?

and u use FF4.1 ? is the beta out?

chrisburton

No, I did not say that. I said it was pointless to use all those margins when you were not even clearing your floats. Everything looks good to me on Firefox 4.0 and Webkit browsers.

Cryptex

hmm thats curious, that i see the header not like on the screen..
but big big thx for your help... i will try now, to fix the xhtml errors :)

Cryptex

so i remove the errors from the (x)html..
http://validator.w3.org/check?verbose=1&uri=http://xtreme-designs.de/testali/

i have now 2 errors.. its by the code

</head>

    <script type="text/javascript">
        $(function() {
            $('#default').slidy();
        });
    </script>

<body>

if i remove the code "w3.org" show valid but i need the slider..

how can i make this better?

peace

chrisburton

The script has to be inside the head section

Cryptex

ouuu haha sorry,
i was confused :)

a big beginner mistake :)

thx.. i think now ist all ok :)

treehouse : what would you like to learn today?

Forums

Move the background to left?