CSS und ich bekomm die Krise.

Status
Nicht offen für weitere Antworten.
A

andralin

Erfahrenes Mitglied
Hallo Leute,

als Programmierer muss ich mich gelegentlich auch mit anderen Sachen auseinadnersetzen, so in diesem Fall mit Reporting in eine HTML Datei.

Also CSS gelernt und ansatzweise auch schon gute Ergebnisse.

Nun möchte ich aber 3 CSS Divs platzieren, wo der mittlere eine feste Größe (990px) bekommt, die anderen beiden sich den Rest vom Schirm teilen, nach möglichkeit so das ich mit Prozentzahlen noch angeben kann wer breiter ist. Also links ist nur 35% vom Rest und rechts natürlich dann 65% vom Rest, bei einem 1280 Screen wäre das dann etwa 189px für link und 101px für rechts.


Zm besseren Verständnis hier noch mal mein Lösungsversuch. *grummel* Aber gescheitert!
Code: 
<HTML>
<HEAD>
  <TITLE>Das ist ein Test</TITLE>
    <link rel="stylesheet" type="text/css" href="css.css">
</HEAD>
<BODY>
    <DIV ID="links">.</DIV>
    <DIV ID="mitte">.</DIV>
    <DIV ID="rechts">.</DIV>
</BODY>
</HTML>

Code: 
#links
{
    FLOAT: left;
    WIDTH: 10%;
    BACKGROUND-COLOR: blanchedalmond
}
#mitte
{
    WIDTH: 990px;
    FLOAT: left;
    BACKGROUND-COLOR: darkorchid
}
#rechts
{ 
    WIDTH: 90%;
    FLOAT: left;
    BACKGROUND-COLOR: forestgreen
}

cu s00n
Andralin
 
andralin hat gesagt.:
Code: 
#links
{
    FLOAT: left;
     WIDTH: 10%;
    BACKGROUND-COLOR: blanchedalmond
}
#mitte
{
    WIDTH: 990px;
    FLOAT: left;
    BACKGROUND-COLOR: darkorchid
}
#rechts
{ 
     WIDTH: 90%;
    FLOAT: left;
    BACKGROUND-COLOR: forestgreen
}
Zum Vergrößern anklicken....
Hallo,
nach meiner Rechnung ist mit dem linken und mit dem rechten Block alles ausgefüllt. Wo sollte deiner Meinung nach der mittlere Block untergebracht werden?
 
Das geht so nicht:
Links und rechts ergeben zusammen ja bereits 100%.
Du kannst auch nicht Pixel mit Prozent vermengen. Das sind zwei unterschiedliche Einheiten.
Außerdem: was sind 90% und was 10%? Das sind entsprechend unterschiedlichen Bildschirmwerten auch unterschiedliche Breiten. Deine Berechnungen würden somit nur bei der entsprechenden Auflösung passen.

Lösungsansätze:

* Lass beim #rechts den Breitenwert weg oder gib ihm "width: auto;"
* mach alles in Prozent, z.B. 10% 75% 15%
* mach alles in Pixel wobei 1280 noch nicht so sehr verbreitet ist. Ich würde eher knapp unter 1000 als Gesamtbreite bleiben. Alles in einen wrapper und den dann zentrieren.
 
hela hat gesagt.:
Hallo,
nach meiner Rechnung ist mit dem linken und mit dem rechten Block alles ausgefüllt. Wo sollte deiner Meinung nach der mittlere Block untergebracht werden?
Zum Vergrößern anklicken....

Der Mittlere Block soll fest positioniert werden, die anderen beiden sich den rest anteilig teilen, mittlerweile weis ich das dies nicht geht. Also würde es mir schon reichen wenn ich den mttleren Block zentriere, die beiden anderen den Raum zu gleichen teilen füllen. Aber es müssen drei DIVS sein. Damit ich rechts und links je eine eigene Grafik vergeben kann.
 
prm hat gesagt.:
Das geht so nicht:
Links und rechts ergeben zusammen ja bereits 100%.
Du kannst auch nicht Pixel mit Prozent vermengen. Das sind zwei unterschiedliche Einheiten.
Außerdem: was sind 90% und was 10%? Das sind entsprechend unterschiedlichen Bildschirmwerten auch unterschiedliche Breiten. Deine Berechnungen würden somit nur bei der entsprechenden Auflösung passen.

Lösungsansätze:

* Lass beim #rechts den Breitenwert weg oder gib ihm "width: auto;"
* mach alles in Prozent, z.B. 10% 75% 15%
* mach alles in Pixel wobei 1280 noch nicht so sehr verbreitet ist. Ich würde eher knapp unter 1000 als Gesamtbreite bleiben. Alles in einen wrapper und den dann zentrieren.
Zum Vergrößern anklicken....

OK so weit bin ich dann schon mal: Siehe oben.
 
Probier's mal so:

Code: 
body, html {margin: 0; padding: 0;}
#links
{
    width: 50%;
    background: blanchedalmond;
}
#mitte
{
width: 990px;
margin-left: -495px;
position: absolute;
left: 50%;
top:0;
background: darkorchid
}
#rechts
{
float: right;
width: 49%;
background: forestgreen;
}

Code: 
<div id="rechts">rechts </div>
<div id="links">links</div>
<div id="mitte">mitte</div>
 
prm hat gesagt.:
Probier's mal so:

Code: 
body, html {margin: 0; padding: 0;}
#links
{
    width: 50%;
    background: blanchedalmond;
}
#mitte
{
width: 990px;
margin-left: -495px;
position: absolute;
left: 50%;
top:0;
background: darkorchid
}
#rechts
{
float: right;
width: 49%;
background: forestgreen;
}

Code: 
<div id="rechts">rechts </div>
<div id="links">links</div>
<div id="mitte">mitte</div>
Zum Vergrößern anklicken....

Der Ansatz ist auch nicht schlecht, aber Text der links drin steht, wird nicht umgebrochen und verschwindet hinter der Mitte. Was ich suchte war eine Lösung, wo rechts und Links sich den Restplatz teilen, so das ich denen feste Grafiken zuweisen kann. Scheint technisch nicht möglich zu sein ohne das man sich vorher die ScreenWidth holt. Aber danke für Eure Hilfe.

cu s00n
Andralin
 
Logisch, ich ging davon aus, dass du links und rechts lediglich für eine Hintergrundgrafik brauchst.
Bleibt also generell feste Breiten oder generell prozentuale Breiten.
 
prm hat gesagt.:
Logisch, ich ging davon aus, dass du links und rechts lediglich für eine Hintergrundgrafik brauchst.
Bleibt also generell feste Breiten oder generell prozentuale Breiten.
Zum Vergrößern anklicken....

Im Prinzip will ich rechts und links auch für Hintergrundgrafiken. Aber irgendwo in der Form das ich den Hauptinhalt stärker rechts oder stärker Links anordnen kann. Gut, wenn das nicht geht dann 0815 Vorlage und eben mehr mit Grafik arbeiten. Aber danke für Eure Hilfe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück