✔ CSS Layout erstellung

Status
Nicht offen für weitere Antworten.
Kein Sorge, Du nervst nicht. ;)

Mit der folgenden CSS-Regel wird der Rahmen um den Grafik-Link auf null gesetzt:

CSS: 
a img {
border: 0;
}
 
Hi
Thx, ich hoffe ich nerve wirklich nicht, ich hab aber schon wieder eine Frage.
Ich habe jetzt noch eine Methode gefunden, für normaler MouseOver Effekte:
Code: 
<a href="Seite1.htm" 
   onMouseOver="document.Bild.src='Bild2.gif';" 
   onMouseOut="document.Bild.src='Bild1.gif';">

<img src="Bild1.gif" 
   name="Bild" 
   width=100 height=50
   alt="Demolink" 
   border=0>
</a>
Das aber jetzt habe ich eine Rote kleine Linie bei den Links, hier das Beispiel:
KLICK
 
Dann tausche mal den Wert underline gegen none:

Code: 
a {
text-decoration: underline; 
color: #FF0000; 
font-weight: normal;
}
 
Hi
Ich bins wieder, ich habe mir gerade ein neues Layout erstellt, es basiert auf dem alten :D
Aber es wird nur im Internet Explorer richtig angezeigt, könntest du mir bitte nochmal helfen?, hier der Code:
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-color: #00CCFF;
padding: 0px;
margin: 0px;
}

#container {
background-color: #FFFFFF;
width: 825px;
margin: 0 auto;
border: 1px solid black;
}

#header {
background-color: #e2dede;
width: 800px;
height: 150px;
border: 1px solid black;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
margin-left: 10px;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
}

.rightCol { /* rechte Spalte */
width: 640px;
float: right;
}

#content {
background-color: #e2dede;
width: 640px;
border: 1px solid black;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}

.box {
background-color: #e2dede;
width: 150px;
border: 1px solid black;
margin-bottom: 10px;
margin-left: 10px;
}

#footer {
background-color: #e2dede;
width: 640px;
margin-top: 10px;
border: 1px solid black;
margin-right: 10px;
margin-left: 09px;
}
</style>

</head>
<body>

<div id="container">
     <div id="header"></div>

     <div class="leftCol">

          <div class="box">
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
          <div class="box">
               <p>&nbsp;</p>

               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
     </div>

     <div class="rightCol">
          <div id="content">
               <p>&nbsp;</p>

               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>

          <div id="footer">footer</div>
     </div>
</div>

</body>
</html>

THX Alex
 
Hier der überarbeitete Quellcode:

HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
background-color: #00CCFF;
padding: 0px;
margin: 0px;
}

#container {
background-color: #FFFFFF;
width: 825px;
margin: 0 auto;
border: 1px solid black;
}

#header {
background-color: #e2dede;
width: 805px;
height: 150px;
border: 1px solid black;
margin: 10px;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
margin-left: 10px !important; /* Für nicht-IE-Browsers */
margin-left: 5px; /* Für IE */
}

.rightCol { /* rechte Spalte */
width: 645px;
float: right;
margin-right: 10px !important; /* Für nicht-IE-Browsers */
margin-right: 5px; /* Für IE */
}

#content {
background-color: #e2dede;
border: 1px solid black;
}

.box {
background-color: #e2dede;
border: 1px solid black;
margin-bottom: 10px;
}

#footer {
background-color: #e2dede;
margin-top: 10px;
border: 1px solid black;
}

.clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss her */
clear: both;
font-size: 1px;
}
</style>

</head>
<body>

<div id="container">
     <div id="header"></div>

     <div class="leftCol">

          <div class="box">
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
          <div class="box">
               <p>&nbsp;</p>

               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>
     </div>

     <div class="rightCol">
          <div id="content">
               <p>&nbsp;</p>

               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
               <p>&nbsp;</p>
          </div>

          <div id="footer">footer</div>
     </div>

     <div class="clear">&nbsp;</div>
</div>

</body>
</html>
 
Hi
Thx für die schnelle Antwort und dass du mir alles immer so ausführlich erklärst.
Das mit den Kommentaren ist sehr gut, so ist es sehr leicht verständlich.
Thx
 
Hi
Sry ich weis ich nerv, aber kannst du mir das bitte kurz erklären, mit dem clear?
Ich hab das jetzt gemacht, aber der Hintergrund is immer noch so wie vorhi.

KLICK

Thx Alex

edit:
1, Sry wegen dem Doppel Post
2, Es schon, thx
 
Zuletzt bearbeitet:
Du lädst das Dokument index.php zweimal in ein Frameset, obwohl es selber das Frameset definiert. :confused:

Derzeitiger Quellcode der index.php:

Code: 
<frameset framespacing="0" border="0" cols="100%,*" frameborder="0">
  <frame name="Home" scrolling="auto" marginwidth="0" marginheight="0" noresize src="home.php" target="Hauptframe">
 <frame src="index.php"><frame src="index.php"></frameset><noframes>
 Ihr Browser unterstützt keine Frames. Bitte benutzen Sie einen Browser, der Frames unterstützt.
 </noframes>

@ clear: die clear-Eigenschaft sorgt dafür, daß nach der float-Eigenschaft im Dokument die nachfolgenden Elemente wieder im normalen Textfluss angezeigt werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück