• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

gleiche Höhe

B

BerndDasBrot

New member
ich hab volgenden Code (Farben nur zur Demonstration):
Code: 
<html>
<head>
<style>
#main {
    width:80%;
    background-color:#FF0000;
}
#links {
    width:25%;
    background-color:#0000FF;
}
#rechts {
    width:75%;
    background-color:#00FF00;
    margin-left:25%;
}
</style>
</head>
<body>
<div id ="main">
Hallo>
<div id ="links">
Hallo
</div>
<div id ="rechts">
Hallo
</div>
</div>
</body>
</html>

wie kann ich "rechts" und "links" auf die gleiche Höhe bringen
Danke

BernddasBrot
 
Welche Höhe hat #main?

Ich geb' ihr mal ein fiktive...
Code: 
#main {
    position:absolute;
    top:0%;
    left:0%;
    width:80%;
    height:20%;
    background-color:#FF0000;
}
#links {
    position:absolute;
    top:20%;
    left:0%;
    width:25%;
    background-color:#0000FF;
}
#rechts {
    position:absolute;
    top:20%;
    left:25%;
    width:75%;
    background-color:#0000FF;
}
 
Du kannst dem Ganzen auch ohne Höhenangabe eine einheitliche Höhe geben und das auch noch in der Länge automatisch nach Contentmenge vertikal skalieren lassen, wenn du eine kleine background-Grafik für einen 100% Aussenbereich verwendest, die den Hintergrund für links mitte rechts darstellt.
Zur Veranschaulichung hol dir mal das Pointswavedesign aus der gfx und schau es dir unter diesem Aspekt näher an.
 
@bine: Ich glaub, entweder hast du nicht verstanden, was ich will, oder ich versteht dich falsch (letzteres ist wahrscheinlicher)
soll ich eine Grafik machen, die so aussieht:
----------------
------------------
?
Aber wie krieg ich dann den Text hin?

ICh glaub ich nehm dkdenz´ Vorschlag, auch wenn ich die Positionen da umarbeiten muss, es sei denn, du hast einen deiner genialen Einfälle ;)

BernddasBrot

P.S.: Es soll eine Site für die GFX werden
 
danke für den Link, aber da ist es ja so wie in deinem 1. Vorschlag so, dass die Höhe fest positioniert ist

BernddasBrot

P.S.: Ich hab grad entdeckt, dass CSS3 schon 2004 fertig werden sollte....
 
hab ich, alle Browser machen es richtig außer dem - wer hätte es anders erwartet - IE!

Mein jetziger QT:
index.html:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>
      Homepage-Template 2005 by BeeWee. http://beewee.de.ms
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="outer">
      <div class ="kasten">
        <div class ="kastenueberschrift">
          http://beewee.de.ms
        </div>
        We want to entertain you!
      </div>
      <div id ="links">
        s
      </div>
      <div id ="main">
        a
      </div>
    </div>
  </body>
</html>
style.css:
Code: 
body {
    background-color: #FFFFFF;
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {
    width: 85%;
    background-color:#FFFFFF;
    margin-top: 30px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: 0px solid #000000;
}
.kasten {
    background-color:#FFFFFF;
    width:100%;
    border: 1px solid #D4D4D4;
    text-align:center;
    font-size:10pt;
}
.kastenueberschrift {
    background-color:#F9F9F9;
    width:100%;
    color:#FCCE55;
    text-align:center;
    font-size:12pt;
}
div#links {
    width:25%;
    border-left:1px solid #D4D4D4;
    border-bottom:1px solid #D4D4D4;
    border-right:1px solid #D4D4D4;
    float:left;
}
div#main {
    margin-top:0px;
    margin-left:25%;
    width:75%;
    border-bottom:1px solid #D4D4D4;
    border-right:1px solid #D4D4D4;
}
a:link { color:#FCCE55; font-size:12pt; text-decoration:none; font-family:'Times New Roman',Times,serif}
a:visited { color:#FCCE55; font-size:12pt; text-decoration:none; font-family:'Times New Roman',Times,serif}
a:hover { color:#FFBA27; font-size:12pt; text-decoration:underline; font-family:'Times New Roman',Times,serif}
a:active { color:#FFBA27; font-size:12pt; text-decoration:underline; font-family:'Times New Roman',Times,serif}
a:focus { color:#FFBA27; font-size:12pt; text-decoration:underline; font-family:'Times New Roman',Times,serif}

Danke für eure Hilfe

BernddasBrot
 
Du solltest da auch border berücksichtigen.
Also immer alle vier border angeben und da wo es nicht zu sehen sein soll border 1px #fff schreiben.
Dann auch noch an padding denken.
Das alles "verzieht" die Gesamtmaße über 100%...
 
Jedesmal ist das eine Fummelei, aber Übung macht den Meister, ich schau mir das mal später am Abend an. Find ich aber toll das Du was für die gfx erstellst :)
 
ich habs jetzt mal nach dkdenz´ Methode gemacht und es hochgeladen. Musst es nur noch freischalten

BernddasBrot
 
Zuletzt bearbeitet:
Hab Dein Template grad veröffentlicht. Im IE5 wird die Zentrierung nicht berücksichtigt. Browserkompatibler wäre den outer bereich so zu zentrieren.
position:absolute;
width:84%:
left:50%;
margin-left:-42%;

Und den Inhalt hätt ich nicht generell zentriert. Sondern left und main mit padding versehen und linksbündig ausgerichtet, aber egal kann ja Jeder machen wie er will. Es sieht insgesamt schlicht und gut aus.

IE6, IE5.5, Opera 7.5.4 und Mozilla 1.6 getestet ist es OK. Nur der IE 5.5. berücksichtigt das margin nicht, setzt es links und oben hin aber das kann man optisch auch so stehen lassen.

Das mit dem Hintergrundbild was ich vorher in diesem Thread erwähnte ginge hier nicht weil das Layout in % Breiten erstellt und somit horizontal skalierbar ist. Das geht dann nur mit festen pixel-Größenangaben, weil sonst reißt es ja das Design auseinander, denn das HG-Bild hätte ja ne feste pixelgrösse, die dann auseinandergezogen würde.
 
bine schrieb:
Browserkompatibler wäre den outer bereich so zu zentrieren.
position:absolute;
width:84%:
left:50%;
margin-left:-42%;
Zum Vergrößern anklicken....
Könntest du das bitte umändern, da man Bilder ja nicht bearbeiten kann?
Danke

@Zentriert: Das hab ich so gemacht, da ich alles links etwas "bescheiden" fand.
Aber ich werde wahrscheinlich eh immer mal wieder ein neues Template hochladen, irgendwann auch mal linksbündig ;)

BernddasBrot
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben