CSS Layout erstellen: Hilfe

anna55 · 27. Feb. 2009

Nimm aus Deinem CSS mal die HTML-Tags am Anfang und am Ende raus.

PHP:

<style type="text/css" media="screen">
</style>

Jonas23 · 27. Feb. 2009

anna55 schrieb:
Nimm aus Deinem CSS mal die HTML-Tags am Anfang und am Ende raus.

PHP:

<style type="text/css" media="screen"> </style>

miraaza deins ging leider nicht
anna vielen dank der background funktioniert jetzt
doch jetzt hat es mir alle boxen verschoben

miraaza · 27. Feb. 2009

Jonas23 schrieb:
miraaza deins ging leider nicht
anna vielen dank der background funktioniert jetzt
doch jetzt hat es mir alle boxen verschoben

grml.. hab doch auch gesagt nimm <style type=..> weg ;D

wieso was hat es den verschoben? die seite sieht immer noch gleich aus -___-

Jonas23 · 27. Feb. 2009

miraaza schrieb:
grml.. hab doch auch gesagt nimm <style type=..> weg ;D

wieso was hat es den verschoben? die seite sieht immer noch gleich aus -___-

oh tuet mir leid übersehen
muss mich besser konzentrieren
wie meinst als global.css speichern
meinst du die 2html zu global.css oder wie

miraaza · 27. Feb. 2009

Jonas23 schrieb:
oh tuet mir leid übersehen
muss mich besser konzentrieren
http://www.matterdesign.ch/2.html habs hochgeladen
wie meinst als global.css speichern
meinst du die 2html zu global.css oder wie

gseht doch viu besser us =)

ne ist schon gut, hab nur gesagt, speicher es normal ab,,,
jetzt ist der header verschoben worden, musst jetzt halt schauen,, mit floats und aligns auf left stellen =)

anna55 · 27. Feb. 2009

Du nimmst ins CSS in #contents hinein

PHP:

background: url(menu.jpg) no-repeat;

und auch hier raus aus dem HTML.

Jonas23 · 27. Feb. 2009

anna55 schrieb:
Du nimmst ins CSS in #contents hinein

PHP:

background: url(menu.jpg) no-repeat;

und auch hier raus aus dem HTML.

also der css sollte so aussehen oder

PHP:

	body{
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #505367;
	background: #505367 url(hintergrund.gif) repeat;   
	}
	
	
	#container {
	width: 60em;
	margin: 0 auto;
	padding: 0;
	

	}

	#content {
	min-height:600px;
	float: right;
	padding: 0;
	margin: 0 0 0 20em;
	 
	}	
	#header
	{
		width:auto;
		float: left;
		height: 94px;
		background: url(logo.jpg) no-repeat; 
	    
	}
	
	#mainnav
	{
		height: 54px;
		width: 243px;
		background-color: green;
		background: url(home.jpg) no-repeat; 
		
	}
	
	#menu
	{
		float: left; 
		width: 350px;
		height: 353px;
		background-color: yellow;
		background: url(menu.jpg) no-repeat; 
	}
	
	#contents	
	{
		width: auto;
		height: 353px;
		background-color: aqua;
		background: url(news.jpg) no-repeat; 
	}
	
	#footer	
	{
		clear: both;
		height: 20px;
		background-color: lime;
	}

das template funkt nicht mehr jetzt hängt es oben

miraaza · 27. Feb. 2009

Mach mal so:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head>
		<link rel="stylesheet" type="text/css" href="global.css">
	</head>
	<body>
		<br /><br />
		<div id="container">
			<div id="header">
				<a href="http://xhtmlforum.de/" class="logo-link">
				<img src="logo.jpg" width="271" height="90" alt="zurück zur Startseite" /></a> 
			</div>
			<div id="mainnav">
				<a href="http://xhtmlforum.de/" class="logo-link">
				<img src="home.jpg" width="243" height="54" /></a>
			</div>
			<div id="menu">
				<img src="news.jpg" width="229" height="353"  />
			</div>
			<div id="contents"></div>
			<div id="footer"></div>
		</div>
	</body>
</html>

Code:

body { 
	margin: 0; 
	padding: 0; 
	font: 85% arial, hevetica, sans-serif; 
	text-align: center; 
	color: #505367; 
	background-image:url(background.jpg); 
} 
     
#container { 
	width: 60em; 
	margin: 0 auto; 
	padding: 0; 
	text-align:left;
} 

#content { 
	min-height:600px; 
	background-color: #ffffff; 
	padding: 0; 
	margin: 0 0 0 20em; 

} 

#header{ 
	width:auto;   
        height: 94px; 
}  

#mainnav { 
        height: 54px; 
        width: 243px; 
        background-color: green; 
} 
     
#menu { 
        float: right;  
        width: 350px; 
        height: 353px; 
        background-color: yellow; 
} 
     
#contents { 
        width: auto; 
        height: 353px; 
        background-color: aqua; 
	background-image:url(menu.jpg);
} 
     
#footer{ 
        clear: both; 
        height: 20px; 
        background-color: lime; 
}

Sieht dann auch in den anderen Browsern auch gut aus

Jonas23 · 27. Feb. 2009

miraaza schrieb:

Mach mal so:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head>
		<link rel="stylesheet" type="text/css" href="global.css">
	</head>
	<body>
		<br /><br />
		<div id="container">
			<div id="header">
				<a href="http://xhtmlforum.de/" class="logo-link">
				<img src="logo.jpg" width="271" height="90" alt="zurück zur Startseite" /></a> 
			</div>
			<div id="mainnav">
				<a href="http://xhtmlforum.de/" class="logo-link">
				<img src="home.jpg" width="243" height="54" /></a>
			</div>
			<div id="menu">
				<img src="news.jpg" width="229" height="353"  />
			</div>
			<div id="contents">
				<img src="menu.jpg" width="509" height="353"  />
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>

Code:

body { 
	margin: 0; 
	padding: 0; 
	font: 85% arial, hevetica, sans-serif; 
	text-align: center; 
	color: #505367; 
	background-image:url(background.jpg); 
text-align:center;
} 
     
#container { 
	width: 60em; 
	margin: 0 auto; 
	padding: 0; 
text-align:left;
} 

#content { 
	min-height:600px; 
	background-color: #ffffff; 
	padding: 0; 
	margin: 0 0 0 20em; 

} 

#header{ 
	width:auto;   
        height: 94px; 
}  

#mainnav { 
        height: 54px; 
        width: 243px; 
        background-color: green; 
} 
     
#menu { 
        float: right;  
        width: 350px; 
        height: 353px; 
        background-color: yellow; 
} 
     
#contents { 
        width: auto; 
        height: 353px; 
        background-color: aqua; 
} 
     
#footer{ 
        clear: both; 
        height: 20px; 
        background-color: lime; 
}

Sieht dann auch in den anderen Browsern auch gut aus

vorhin sagte mir anna ich soll die img src aus dem html nehmen
und du sagst mir das Gegenteil, was nun?
hab deine Code genommen dann sind sie ebenso verschoben

miraaza · 27. Feb. 2009

Ja kannst du auch, ich hab jetzt menu.jpg in CSS definiert, mach das mit allen bildern die in die div's kommen,, ist schlauer =)

// habs vorhin noch korrigiert sry ;-)

Jonas23 · 27. Feb. 2009

miraaza schrieb:
Ja kannst du auch, ich hab jetzt menu.jpg in CSS definiert, mach das mit allen bildern die in die div's kommen,, ist schlauer =)

// habs vorhin noch korrigiert sry ;-)

wo hast du menu.jpg deviniert ist doch immer noch im html oder

miraaza · 27. Feb. 2009

ich schreib dir schnell dein HTML um wart =)

Jonas23 · 27. Feb. 2009

miraaza schrieb:
ich schreib dir schnell dein HTML um wart =)

oh sehr nett von dir

miraaza · 27. Feb. 2009

Probiers mal aus

Ich weiss nicht ob es genau das ist was du willst, aber sollte gehen

funktioniert auf jeden fall bei mir,, und ändere es nach wunsch ab

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  
    <head> 
        <link rel="stylesheet" type="text/css" href="global.css"> 
    </head> 
    <body> 
        <br /><br /> 
        <div id="container">
            <div id="header"></div> 
            <div id="mainnav"> 
                <a href="#"><img src="home.jpg" width="243" height="54" /></a> 
            </div> 
	    <div id="content_all">
            	<div id="menu"></div> 
            	<div id="contents"></div> 
	   </div>
            <div id="footer"></div> 
        </div> 
    </body> 
</html>

CSS:

PHP:

body { 
	margin: 0; 
	padding: 0; 
	font: 85% arial, hevetica, sans-serif; 
	text-align: center; 
	color: #505367; 
	background-image:url(background.gif); 
} 

a img{
	border: none;
}   
#container { 
	width: 800px;; 
	margin: 0 auto; 
	padding: 0; 
	text-align:left;
} 


#header{  
	height: 90px;
	width: 450px;
	background-image:url(logo.jpg);
	background-repeat:no-repeat;
}  

#mainnav { 
        height: 54px; 
        width: 243px; 
} 
#content_all {
	width:865px;
}
     
#menu { 
	float:left;
        height: 353px; 
	width: 509px;
	background-image:url(menu.jpg);
	background-repeat:no-repeat;
} 
     
#contents { 
        float: left;  
        width: 354px; 
        height: 353px; 
        background-color: yellow; 

} 
     
#footer{ 
        clear: both; 
        height: 20px; 
	width:863px;
        background-color: lime; 
}

Jonas23 · 27. Feb. 2009

vielen Dank sieht sehr toll aus
aber wie du siehts kann man jetztz gegen die Seiten skrollen
das wollte ich eigentlich verhindern
und wie kann ich die breite schmaler machen

vielen Dank nochmals

miraaza · 27. Feb. 2009

Jonas23 schrieb:
http://www.matterdesign.ch/2.html

vielen Dank sieht sehr toll aus
aber wie du siehts kann man jetztz gegen die Seiten skrollen
das wollte ich eigentlich verhindern
und wie kann ich die breite schmaler machen

vielen Dank nochmals

chch ein kleiner fehler von mir, stell einfach #header width auf 450px dann klappts ^^

Jonas23 · 28. Feb. 2009

miraaza schrieb:
chch ein kleiner fehler von mir, stell einfach #header width auf 450px dann klappts ^^

ooh vielen Dank
bin ich froh dass es hier so ein geiles Forum gibt mit so hilfsbereiten User
nochmals an alle vielen Dank, für eure Hilfe mit Euren Kenntnissen

anna55 · 28. Feb. 2009

Ich hab mich mal ein wenig umgesehen, weil Du nach einem Menü gefragt hast. Schau Dir mal die Beispiele durch oder blättere mal selbst durch die Listen:
Dynamic Drive CSS Library- Solid Block Menu
Dynamic Drive CSS Library- Glossy Horizontal Menu
Dynamic Drive CSS Library- Vista Aero Buttons Menu
Dynamic Drive CSS Library- Inverted Shift Down Menu
Stu Nicholls | CSSplay | Professional drop-down menu #2
Dynamic Drive DHTML Scripts -DD Tab Menu (5 styles) (Beispiel 3)

Jonas23 · 28. Feb. 2009

anna55 schrieb:
Ich hab mich mal ein wenig umgesehen, weil Du nach einem Menü gefragt hast. Schau Dir mal die Beispiele durch oder blättere mal selbst durch die Listen:
Dynamic Drive CSS Library- Solid Block Menu
Dynamic Drive CSS Library- Glossy Horizontal Menu
Dynamic Drive CSS Library- Vista Aero Buttons Menu
Dynamic Drive CSS Library- Inverted Shift Down Menu
Stu Nicholls | CSSplay | Professional drop-down menu #2
Dynamic Drive DHTML Scripts -DD Tab Menu (5 styles) (Beispiel 3)

oh vielen Dank
Dynamic Drive CSS Library- Solid Block Menu
hab mich für diesen entschieden
nun hab ihn soeingebaut

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  
    <head> 
        <link rel="stylesheet" type="text/css" href="global.css"> 
    </head> 
    <body> 
        <br /><br /> 
        <div id="container">
            <div id="header"></div> 
            
            
            <div id="mainnav"> 
            <ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />


                 
            </div>
            
            
            
          
             
        <div id="content_all">
                <div id="menu"></div> 
                <div id="contents"></div> 
       </div>
            <div id="footer"></div> 
        </div> 
    </body> 
</html>

PHP:

body { 
    margin: 0; 
    padding: 0; 
    font: 85% arial, hevetica, sans-serif; 
    text-align: center; 
    color: #505367; 
    background-image:url(hintergrund.gif); 
}  

a img{
    border: none;
}   
#container { 
    width: 800px;; 
    margin: 0 auto; 
    padding: 0; 
    text-align:left;
} 


#header{  
    height: 90px;
    width: 450px;
    background-image:url(logo.jpg);
    background-repeat:no-repeat;
}  

#mainnav { 
        height: 54px; 
        width: 243px; 
		.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}
		
		
		
		
		
		
		
} 
#content_all {
    width:865px;
}
     
#menu { 
    float:left;
        height: 353px; 
    width: 509px;
    background-image:url(menu.jpg);
    background-repeat:no-repeat;
} 
     
#contents { 
        float: left;  
        width: 354px; 
        height: 353px; 
        background-color: yellow; 
		background-image:url(news.jpg);
		background-repeat:no-repeat;
} 
     
#footer{ 
        clear: both; 
        height: 20px; 
    width:863px;
        background-color: lime; 
}

also die zwei bilder hab ich
doch es wird normal angezeigt

dkdenz · 28. Feb. 2009

Sieh Dir mal die Positionen Deiner geschweiften Klammern genauer an...

CSS Layout erstellen: Hilfe

Moderator

New member

miraaza

Guest

New member

miraaza

Guest

Moderator

New member

miraaza

Guest

New member

miraaza

Guest

New member

miraaza

Guest

New member

miraaza

Guest

New member

miraaza

Guest

New member

Moderator

New member

New member