PSler
Hallo Community,
ich arbeite grade an einer Webseite, die im Content aus zwei Spalten bestehen soll - 1 für News und den jeweiligen Content, 1 für Quicknews.
Also hab ich für das div news float: left; gesetzt....
Das klappt aber nur im IE so wies soll, also dass news im div main bleibt udn dessen Höhe erweitert...
Im FF und in Safari sieht das ganz anders aus; udn zwar nicht so wies soll... für mich das erste mal dass nicht IE sondern FF zickt ^^
Hier mal die Screenies (aus Lunascape, damit ich nicht alle Browser installen muss):
IE:
FF:
Ich hoffe mal ihr könnt mir helfen oder mir eine Alternative zu dem float Tag liefern, an dem liegts nämlich, ich habs getestet...
Achja, noch eine Frage: Was ist der Untershcied zwischen id und class?
Ich habe gelesen, dass class für tags ist die man nur einaml auf der ganzen Seite benutzt... Aber den Unetrshcied hab ich trotzdem nciht bemerkt...
Und hier der Code:
MfG,
Rum0
PS: Am Hintergrundbild arbeite ich noch ^^
ich arbeite grade an einer Webseite, die im Content aus zwei Spalten bestehen soll - 1 für News und den jeweiligen Content, 1 für Quicknews.
Also hab ich für das div news float: left; gesetzt....
Das klappt aber nur im IE so wies soll, also dass news im div main bleibt udn dessen Höhe erweitert...
Im FF und in Safari sieht das ganz anders aus; udn zwar nicht so wies soll... für mich das erste mal dass nicht IE sondern FF zickt ^^
Hier mal die Screenies (aus Lunascape, damit ich nicht alle Browser installen muss):
IE:
FF:
Ich hoffe mal ihr könnt mir helfen oder mir eine Alternative zu dem float Tag liefern, an dem liegts nämlich, ich habs getestet...
Achja, noch eine Frage: Was ist der Untershcied zwischen id und class?
Ich habe gelesen, dass class für tags ist die man nur einaml auf der ganzen Seite benutzt... Aber den Unetrshcied hab ich trotzdem nciht bemerkt...
Und hier der Code:
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=utf-8" />
<title>Titel der Seite</title>
<script type="text/JavaScript" src="js/curvycorners.src.js"></script>
<style type="text/css" media="screen">
body {
background-image:url(images/background.jpg);
background-color: black;
color: white;
text-align: center;
font-family: Helvetica,Arial,sans-serif;
}
.content {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.header {
background-image:url(images/transparentbackground.png);
height: 100px;
margin-top: -20px;
padding-top: 10px;
border: 1px solid white;
border-top-width: 0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5pxx;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
.header .title {
padding-left:10px;
float: left;
font-size: 20pt;
padding-top: 25px;
}
.header .subtitle {
font-size: 10pt;
color: gray;
}
.header .linkbar {
text-align: right;
float: right;
width: 220px;
margin-top: 10px;
}
.header .linkbar a{
text-decoration: none;
color: white;
font-size: 12pt;
padding: 10px;
}
.main {
background-image:url(images/transparentbackground.png);
border: 1px solid white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 10px;
}
.main .navbar {
height: 44px;
margin-bottom: 10px;
border-bottom: 1px solid white;
}
.main .navbar a {
padding-left: 20px;
padding-right: 20px;
position: relative;
top: -15px;
color: white;
text-decoration: none;
}
.main .news {
padding-left: 10px;
float: left;
width: 600px;
}
.main .news #newsarticle{
padding-left: 10px;
margin-bottom: 10px;
background-color: white;
color: black;
width: 400px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#date{
position: relative;
background-color: white;
color: black;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
-moz-border-radius-top-left: 5px;
-moz-border-radius-bottom-left: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.main .quicknews {
padding-right: 10px;
/*float: right;*/
}
.footer {
background-image:url(images/transparentbackground.png);
position: absolute;
bottom: 0px;
height: 100px;
width: 1000px;
margin-bottom: -20px;
padding-bottom: 10px;
border: 1px solid white;
border-bottom-width: 0px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}
</style>
</head>
<body>
<div class="content">
<div class="header">
<div class="title">
Titel der Seite<br />
<span class="subtitle">Untertitel der Seite.</span>
</div>
<div class="linkbar">
<a href="#">Link1</a>-<a href="#">Link2</a>-<a href="#">Link3</a>
</div>
</div>
<div class="main">
<div class="navbar">
<a href="#">Link1</a><img src="images/separator.gif" width="1px" height="44px" alt="" />
<a href="#">Link2</a><img src="images/separator.gif" width="1px" height="44px" alt="" />
<a href="#">Link3</a><img src="images/separator.gif" width="1px" height="44px" alt="" />
</div>
<div class="news">
NERDI<br />
NERDI<br />
NERDI<br />
NERDI<br />
NERDI<br />
</div>
<div class="quicknews">
Quicknews - kein Float angegeben<br />
Quicknews - kein Float angegeben<br />
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>Rum0
PS: Am Hintergrundbild arbeite ich noch ^^
und schau doch mal im Inet na dem clearfix das hilft dir bestimmt weiter
