✔ Problem mit "dynamischem Div"

Maik · 5. Juli 2010

So, ich hab mal fix "Tabularasa" in deinem CSS gespielt.

Existierende left-Angaben wurden von mir durch margin-left ersetzt, ansonsten habe ich mit Ausnahme der Menüpunkte alle Positionsangaben auskommentiert.

Die Seitendarstellung ist bzgl. der einzelnen Block-Positionen weitesgehend deckungsgleich - doch vor allem sitzt nun der Footer-Bereich näher am Inhalt, und es klafft zwischen beiden keine so große Lücke mehr, wie in deiner Vorlage ;-)

CSS:

@charset "utf-8";

/* CSS Document */
body {
        background-color: #1e1e1e;
        font-family: sans-serif;
        font-size: 11px;
        color: #cce1e3;
        text-align: justify;
}

#container {
        width: 850px;
        min-height: 200px;
        left: 50%;
        margin-left: -425px;
        position: absolute;
}

/* for Internet Explorer */ /*\*/
* html #container {
        height: 200px;
}

/**/
#header {
        /*position: absolute;*/
        width: 850px;
        height: 175px;
        /*left: 0px;
        top: 0px;*/
        background-image: url(http://xtreme-racers.lima-city.de/images/header.png);
        background-repeat: no-repeat;
}

#content {
        /*position: relative;
        top: 175px;
        left: 0px;*/
        width: 850px;
        min-height: 373px;
        background-image: url(http://xtreme-racers.lima-city.de/images/verlaengerungspixel.png);
        background-repeat: repeat-y;
}

/* for Internet Explorer */ /*\*/
* html #content {
        height: 373px;
}

/**/
#middle {
        /*position: relative;
        top: 0px;
        left: 0px;*/
        width: 850px;
        min-height: 830px;
        background-image: url(http://xtreme-racers.lima-city.de/images/middle.png);
        background-repeat: repeat-x;
}

/* for Internet Explorer */ /*\*/
* html #middle {
        height: 630px;
}

/**/
#middleLarge {
        /*position: relative;
        top: 0px;
        left: 0px;*/
        width: 850px;
        min-height: 1330px;
        background-image: url(http://xtreme-racers.lima-city.de/images/middle.png);
        background-repeat: repeat-x;
}

/* for Internet Explorer */ /*\*/
* html #middleLarge {
        height: 1330px;
}

/**/
#textcont {
        /*position: relative;*/
        padding-top: 5px;
        padding-bottom: 20px;
        /*top: 0px;*/
        margin-left: 50px;
        width: 400px;
        min-height: 300px;
}

#footer {
        position: relative;
        width: 850px;
        height: 400px;
        background-image: url(http://xtreme-racers.lima-city.de/images/footer.png);
        background-repeat: no-repeat;
}

#menu {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 850px;
        height: 45px;
        position: relative;
}

#menu a {
        display: block;
        text-indent: -900%;
        position: absolute;
        outline: none;
}

#menu .home {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/Home.png) no-repeat;
        left: 30px;
        top: 120px;
}

#menu .home:hover {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/Home_hover.png) no-repeat;
        left: 30px;
        top: 120px;
}

#menu .events {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/Events.png) no-repeat;
        left: 115px;
        top: 120px;
}

#menu .events:hover {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/Events_hover.png) no-repeat;
        left: 115px;
        top: 120px;
}

#menu .contact {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/ContactUs.png) no-repeat;
        left: 215px;
        top: 120px;
}

#menu .contact:hover {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/ContactUs_hover.png) no-repeat;
        left: 215px;
        top: 120px;
}

#menu .showroom {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/Showroom.png) no-repeat;
        left: 330px;
        top: 120px;
}

#menu .showroom:hover {
        width: 85px;
        height: 45px;
        background: url(http://xtreme-racers.lima-city.de/images/buttons/Showroom_hover.png) no-repeat;
        left: 330px;
        top: 120px;
}

#boxBig {
        /*top: 5px;*/
        margin-left: 27px;
        /*position: absolute;*/
        min-height: 303px;
        height: 303px;
        min-width: 795px;
        background-repeat: no-repeat;
        text-align: left;
        font-weight: bold;
}

/* for Internet Explorer */ /*\*/
* html #boxBig {
        width: 795px;
}

/**/
#boxBigText {
        /*top: 10px;*/
        margin-left: 500px;
        /*position: absolute;*/
        max-width: 275px;
}

/* for Internet Explorer */ /*\*/
* html #boxBigText {
        width: 270px;
}

/**/
#boxShowroom {
        /*top: 300px;*/
        margin-left: 27px;
        /*position: relative;*/
        min-height: 100px;
        height: 100px;
        background-repeat: no-repeat;
        text-align: left;
        font-weight: bold;
}

#boxnews {
        /*top: 320px;*/
        margin-left: 425px;
        /*position: absolute;*/
        background-image: url(http://xtreme-racers.lima-city.de/images/newsbox.png);
        min-height: 307px;
        height: 307px;
        min-width: 395px;
        background-repeat: no-repeat;
        text-align: left;
        font-weight: bold;
}

/* for Internet Explorer */ /*\*/
* html #boxnews {
        width: 395px;
}

/**/
#boxnewsText {
        /*top: 80px;*/
        margin-left: 15px;
        /*position: absolute;*/
        max-width: 280px;
}

/* for Internet Explorer */ /*\*/
* html #boxBigText {
        width: 280px;
}
/**/

#textboxcontent {
 /*margin-top: 320px;*/
  margin-left:30px;
  /*position: absolute;*/
  width: 795px;
  min-height: 800px;
  /*height: 800px;*/
  background-image: url(http://xtreme-racers.lima-city.de/images/textverlaengerung.gif);
  background-repeat: repeat-y;
}

#textbox {
        margin-top: -15px;
        /*position: absolute;*/
        width: 795px;
        min-height: 800px;
        /*height: 800px;*/
        text-align: left;
        background-image: url(http://xtreme-racers.lima-city.de/images/textbox.gif);
        background-repeat: no-repeat;
}

#textboxfooter {
        /*margin-top:450px;
  position: relative;*/
  min-height: 15px;
  height: 15px;
  min-width: 795px;
  background-image: url(http://xtreme-racers.lima-city.de/images/textfooter.gif);
  background-repeat: no-repeat;
}

#textboxtext {
        /*position: relative;*/
        margin-top: 30px;
        margin-left: 40px;
        width: 700px;
}

#showroomBox {
        /*top: 320px;*/
        margin-left: 27px;
        /*position: absolute;*/
        min-height: 800px;
        height: 800px;
        min-width: 795px;
        text-align: left;
        background-image: url(http://xtreme-racers.lima-city.de/images/showroomBox.png);
        background-repeat: no-repeat;
}

#showroomText {
        /*position: relative;
        top: 70px;*/
        margin-left: 50px;
}

h1 {
        font-size: 22px;
        font-weight: bold;
        text-align: left;
}

h2 {
        font-weight: bold;
        font-size: 14px;
}

h3 {
        font-weight: bold;
        font-size: 12px;
}

hr {
        color: #ffce10;
        background-color: #ffce10;
        height: 1px;
}

img {
        border: none;
}

a.anker {
        color: #666666;
        text-decoration: none;
        font-weight: bold;
        font-size: 10px;
}

a.anker:hover {
        color: #888888;
        text-decoration: none;
}

a.anker:active {
        color: #CCCCCC;
        text-decoration: none;
}

.textArea {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #666666;
}

#content {
        text-align: justify;
}

#galleria {
        /*position: absolute;
        top: 555px;*/
        margin-left: 20px;
        width: 750px;
        height: 420px;
}

mfg Maik

Maik · 5. Juli 2010

Noch ein Nachtrag: Um möglicherweise erforderliche Feinabstimmungen und/oder Korrekturen darfst du dich selbständig kümmern, damit bei dir heute Nachmittag nicht vollends die Langeweile ausbricht

mfg Maik

the_royal · 5. Juli 2010

sorry, habe deinen vorderen post erst nachdem ich schon wieder geschrieben habe gesehen.
Die Verlängerung der Divs klappt nun... Diverse Probleme bleiben jedoch.. wenn ich zum Beispiel nur 2 Zeilen Text habe, platziert sich der Footer direkt darunter..
und wenn ich den #textboxtext nach unten verschieben möchte, rutscht komischerweise alles mit?(hintergrundbild von #textbox,...)

Gruss Marco

Maik · 5. Juli 2010

Wegen dem Footer empfehle ich dir meinen Webmaster FAQ-Artikel CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?.

Oder das zweitgenannte Tutorial in meiner Signatur, mit der Vorlage "3cols_header_topNavi_footer.htm" im Anhang "3cols_height100%-fixed-.zip"

Das dreispaltige Layout im mittleren Bereich kannst du ja ohne weiteres entfernen ;-)

Ich weiß zwar nicht, wieso du #textboxtext nach unten verschieben möchtest, denn bei mir sitzt der Block an seinem angedachten Platz, aber verwende in diesem Fall padding-top anstelle von margin-top für eines dieser "textbox"-DIVs, um den Elementinhalt auf diese Weise nach unten zu verrücken.

Das Stichwort für dein beschriebenes Verhalten lautet hier "Zusammenfallende Ränder".

mfg Maik

Maik · 5. Juli 2010

Oder meinst du mit "Footer" den Block #textboxfooter, der den unteren Rahmen bildet?

In diesem Fall hilft dir hier ebenfalls einer meiner Beiträge im Webmaster FAQ-Forum weiter ;-)

CSS Wie richte ich eine Box am unteren Rand der Elternbox aus?

mfg Maik

the_royal · 5. Juli 2010

Okay danke, werde mich da durcharbeiten!

noch zur textbox:
ich möchte nicht die textbox selbst sondern den #textboxtext nach untenschieben, weil das ganze bei mir im moment noch so aussieht:
http://i48.tinypic.com/300wuud.gif

Gruss und danke für deine Hilfe!

Maik · 5. Juli 2010

Jo, padding-top ist hier dein Freund und Helfer ;-)

mfg Maik

the_royal · 5. Juli 2010

Jap, das hat funktioniert! Vielen Dank!

the_royal · 5. Juli 2010

Soo, jetzt klappt alles wunderbar!
...fast

http://i50.tinypic.com/2qdbqs2.gif
auf dem bild erkennst du zwischen den beiden boxen noch etwas... da sollte eigentlich der hintergrund durchschimmern...
jedoch ist da aber bereits der hintergrund, also das verlängerungspixel zu sehen... kann ich das irgendwie nach unten verschieben, oder wie kriege ich das weg?

Gruss

Maik · 5. Juli 2010

Tausch einfach die Hintergrundbilder der beiden Blöcke #textboxcontent und #textbox gegenseitig aus.

Den Rest erledigst du dann mit besagter padding-top-Eigenschaft für die Mutterbox #textboxcontent ;-)

mfg Maik

✔ Problem mit "dynamischem Div"

Maik

Maik

the_royal

Mitglied

Maik

Maik

the_royal

Mitglied

Maik

the_royal

Mitglied

the_royal

Mitglied

Maik

Neue Beiträge