✔ Hilfe bei CSS Layout

Status
Nicht offen für weitere Antworten.
U

undercoverschlumpf

Grünschnabel
Hallo,
ich habe gerade angefangen ein bisschen CSS zu lernen, weil ich auf ein reines Frame-Layout auf meiner Website verzichten möchte.
Ich verstehe schon wie das ganze funktioniert, habe aber Probleme damit sowas wie das hier beispielsweise umzusetzen...

http://img57.imageshack.us/img57/8364/csslaylt0.jpg

Mein Problem sind vor allem die 3 Spalten. :suspekt:
Vielleicht kann mir jemand ein paar Tipps geben oder mir ein bisschen weiter helfen?

Ich suche auch Links zu Seiten mit vorgefertigten CSS Layouts, die man dann allerdings noch verändern und anpassen darf.

Würde mich über eine Antwort freuen. =)
Liebe Grüße,
undercoverschlumpf ;-)
 
 
Ich brauche doch nochmal Hilfe.
In Firefox und Opera sieht das ganze perfekt aus... Im dämlichen IE jedoch nicht...
Vielleicht kann mal jemand schauen, aus dem Tutorial werde ich was das betrifft nicht richtig schlau. *rotwerd*

Wundert euch nicht über die Farben ^^, ist bloß damit man die Bereiche besser erkennen kann.
Ist sicher auch einiges überflüssig... ich übe noch... ;-)


PHP: 
<html>

<head>

<title> My Page </title>

<style type"text/css">
<!--
P {color: #FFFFFF; font: 80% Verdana,"Times New Roman";}
-->
</style>

<STYLE>BODY { 
scrollbar-face-color: #333333; 
SCROLLBAR-TRACK-COLOR: black;
scrollbar-arrow-color: black; 
scrollbar-base-color: black; 
scrollbar-shadow-color : black; 
SCROLLBAR-3DLIGHT-COLOR: #333333;
SCROLLBAR-DARKSHADOW-COLOR: #C0C0C0; 
scrollbar-highlight-color: white; 
} </STYLE>

<style type="text/css" media="screen" scroll=auto>
	body
	{
	color: #FFFFFF; 
                font: 85% Verdana,"Times New Roman"; 
                margin: 0;
	padding: 0;
	text-align: center;
	background-color: #000000;
                link="#FFFFFF";
                alink="#FFFFFF"; 
                vlink="#FFFFFF"; 
	}
	
	font: 85% Verdana,"Times New Roman"; 
	a:link { color: #FFFFFF; }
	a:visited { color: #FFFFFF; }
	a:hover { color: #FFFFFF; } 
	
#container
	{
	margin: 1em auto;
	width: 800px;
                text-align: left;
	background-color: #FFCC99;
	border: 1px solid #FFFFFF;
                link="#FFFFFF";
                alink="#FFFFFF"; 
                vlink="#FFFFFF";
	}


#header
	{
	height: 150px;
	background-image: #
                background-color: #333333
	background-repeat: no-repeat;
	background-position: 0 0;
                link="#FFFFFF";
                alink="#FFFFFF"; 
                vlink="#FFFFFF";	
	}


 #menu
	{
	height: 25px;
	background-color: #CCFFCC;
                color: #000000; 
                font: 90% Verdana,"Times New Roman"; 
                link="#FFFFFF";
                alink="#FFFFFF"; 
                vlink="#FFFFFF";
	}


#linkespalte
	{
	float: left; 
	width: 160px;
	height: 350px;
                margin: 0;
                padding: 0;
	background-color: #99CC00;
                color: #000000; 
                font: 85% Verdana,"Times New Roman"; 
                link="#000000";
                alink="#000000"; 
                vlink="#000000";
                overflow: auto;        /* Scrollbalken, falls notwendig */
        }



#contents	
	{
	position: absolute;
                margin-left: 160px;
                margin-right: 160px; 
                width:auto;
                height:350px;
	background-color: #993366;
                font: 90% Verdana,"Times New Roman"; 
                link="#FFFFFF";
                alink="#FFFFFF"; 
                vlink="#FFFFFF";
	}


#rechtespalte
	{
	float: right; 
	width: 160px;
	height: 350px;
                margin: 0;
                padding: 0;
	background-color: #99CC00;
                color: #000000; 
                font: 85% Verdana,"Times New Roman"; 
                link="#000000";
                alink="#000000"; 
                vlink="#000000";
                overflow: auto;        /* Scrollbalken, falls notwendig */
        }



#footer	
	{
	clear: both;
	height: 15px;
	background-color: #333333;
                color:#000000; 
                font: 85% Verdana,"Times New Roman"; 
                link="#FFFFFF";
                alink="#FFFFFF"; 
                vlink="#FFFFFF";
	}
	
</style>
</head>

<body bgcolor="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<p>


<div id="container">
	<div id="header" title="#">
		<img src="#" /> 
	</div> 


<div id="menu">
	<p> <center>
                  <ul>                    
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
	        | <a href="#" target="Inhalt">#</a> |
                  </ul>
             </p> </center>
</div> 


       
<div id="linkespalte">
	<p> <center>
                  ggg
                </p> </center>
</div>




<div id="contents">
        <iframe src="home.htm" width=480 height=350 align=left scrolling=yes name="Inhalt" border="0" frameborder="0" framespacing="0"></iframe><br />
		
</div>



<div id="rechtespalte">
	<p> <center>
                 kkk
                </p> </center>
</div>



<div id="footer">
	<center><p>
                 <a href="#" target="Inhalt">#</a>  
               | <a href="#" target="Inhalt">#</a> <br />
                </p> </center> 
</div>

</div>

</p> 

</body>

</html>
 
Hi,

ich hab da mal ein wenig im Quellcode "aufgeräumt" und diverse Syntax-Fehler entfernt, sowie im Stylesheet ein paar erforderliche Regeln hinzugefügt (sind fett ausgezeichnet) und das DIV contents im HTML-Quelltext nach den beiden äußeren DIVs linkespalte und rechtespalte notiert.

Vielleicht hilft das weiter.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title> My Page </title>

<style type"text/css">
<!--
P {color: #FFFFFF; font: 80% Verdana,"Times New Roman";}
-->
</style>

<STYLE>BODY {
scrollbar-face-color: #333333;
SCROLLBAR-TRACK-COLOR: black;
scrollbar-arrow-color: black;
scrollbar-base-color: black;
scrollbar-shadow-color : black;
SCROLLBAR-3DLIGHT-COLOR: #333333;
SCROLLBAR-DARKSHADOW-COLOR: #C0C0C0;
scrollbar-highlight-color: white;
} </STYLE>

<style type="text/css" media="screen">
    body
    {
    color: #FFFFFF;
    font: 85% Verdana,"Times New Roman";
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #000000;
    }

    a:link { color: #FFFFFF; }
    a:visited { color: #FFFFFF; }
    a:hover { color: #FFFFFF; }

#container
    {
    margin: 1em auto;
    width: 800px;
    text-align: left;
    background-color: #FFCC99;
    border: 1px solid #FFFFFF;
    }

#header
    {
    height: 150px;
    background-color: #333333;
    background-repeat: no-repeat;
    background-position: 0 0;
    }

 #menu
    {
    height: 25px;
    background-color: #CCFFCC;
    color: #000000;
    font: 90% Verdana,"Times New Roman";
    text-align:center;
    }

#linkespalte
    {
    float: left;
    width: 160px;
    height: 350px;
    margin-right: 0 !important; /* Für moderne Browser */
    margin-right: -3px; /* Für IE */
    padding: 0;
    background-color: #99CC00;
    color: #000000;
    font: 85% Verdana,"Times New Roman";
    overflow: auto;        /* Scrollbalken, falls notwendig */
    text-align:center;
        }

#contents
    {
    margin-left: 160px !important; /* Für moderne Browser */
    margin-left: 157px; /* Für IE */
    margin-right: 160px !important; /* Für moderne Browser */
    margin-right: 157px; /* Für IE */
    height:350px;
    background-color: #993366;
    font: 90% Verdana,"Times New Roman";
    }

#rechtespalte
    {
    float: right;
    width: 160px;
    height: 350px;
    margin-left: 0 !important; /* Für moderne Browser */
    margin-left: -3px; /* Für IE */
    padding: 0;
    background-color: #99CC00;
    color: #000000;
    font: 85% Verdana,"Times New Roman";
    overflow: auto;        /* Scrollbalken, falls notwendig */
    text-align:center;
        }

#footer
    {
    clear: both;
    height: 15px;
    background-color: #333333;
    color:#000000;
    font: 85% Verdana,"Times New Roman";
    text-align:center;
    }
</style>
</head>

<body bgcolor="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="container">
    <div id="header" title="#">
        <img src="#" />
    </div>

<div id="menu">
    <p>
                  <ul>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
                        | <a href="#" target="Inhalt">#</a>
            | <a href="#" target="Inhalt">#</a> |
                  </ul>
             </p>
</div>

<div id="linkespalte">
    <p>ggg</p>
</div>

<div id="rechtespalte">
    <p>kkk</p>
</div>

<div id="contents">
        <iframe src="home.htm"  width=480 height=350 align=left scrolling=yes name="Inhalt" border="0" frameborder="0" framespacing="0"></iframe><br />

</div>

<div id="footer">
    <p>
                 <a href="#" target="Inhalt">#</a>
               | <a href="#" target="Inhalt">#</a> <br />
                </p>
</div>

</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück