• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aufbau der Elemente

S

Shanai

Neues Mitglied
Hallo Leute,

ich bin gerade dabei eine Homepage auf Grundlage eines Mediawikis zu gestalten. Leider sind meine Kentnisse in CSS noch nicht sehr ausgereift, vllt könnt ihr mir ja weiterhelfen...

Im Anhang habe ich zwei Dateien. Datei "ELEMENT SOLL" zeigt den gewünschten Aufbau meiner Homepage. So sieht es auch aus, wenn ich den Browser maximiert geöffnet habe. Wenn ich den Browser (IE) allerdings verkleinere, dann rutschen die Elemente wie in "ELEMENT IST" zusammen, dabei ist ELEMENT C gar nicht mehr sichbar und ELEMENT B irgendwo hinter ELEMENT A. Wie kann ich das verhindern?

Vielen Dank für eure Hilfe!!

Viele Grüße

Isabel
 

Anhänge

  • Elemente IST.pdf
    3,8 KB · Aufrufe: 3
  • Elemente Soll.pdf
    3,9 KB · Aufrufe: 3
Werbung:
Hallo und Willkommen.

etwas Code wäre auch sehr hilfreich. Dein Problem kann allesmögliche sein:

- Rundungsfehler beim Zoomen
- Breiten der Container ergeben nicht 100%
- den Containern eine breite und margin/padding zugewiesen (enstehung von bugs im IE)

Code: 
<!Doctype html>
<html>
<head>
	<title>test</title>
	
<style type="text/css">
* { margin:0; padding:0; }

.clear { clear:both; }

.c25l,.c50l { float:left; }
.c25r { float:right; }
.c25l,.c25r { width:25%; background:#ccc; height:200px; }
.c50l { width:50%; background:#666; height:200px; }
</style>
</head><body>

	<div class="c25l"></div>

	<div class="c50l"></div>

	<div class="c25r"></div>

<div class="clear"><!--clear--></div>

</body></html>


Gruß
Loon3y
 
Werbung:
Hi,

Also hier ist der CSS-Code von...

A:
#mw_portlets {
width: 14em;
margin-top: 10.5em;
position: absolute;
}

B:
#mw_content {
margin: 0.6em 0 0 0;
background-color: #EAECEB;
border-top: solid 1px #EAECEB;
border-left: solid 1px #EAECEB;
border-bottom: solid 1px #EAECEB;
line-height: 1.4em;
padding: 0 1em 2em 1em;
}

C (Überschrift):
#sidebar2 {
color: #575855;
font-size: 10pt;
list-style-type: none;
list-style: none;
line-height: 19.5px;
text-align: left;
font-weight: none;
margin: 2em 0 0 85em;
}

C (Unterpunkt):
#sidebar2i {
color: #575855;
font-size: 11pt;
list-style-type: none;
list-style: none;
line-height: 19.5px;
text-align: left;
font-weight: none;
margin: 0em 0 0 78.5em;
}


Viele Grüße

Shanai
 
Hallo.

die EInheit "pt" ist für das print-medium gedacht. Ebenso positionierst du absolute. wozu? Schau dir einmal mein Beispiel an, da war alles aufgelistet. Solltest du offene Fragen haben, stell sie ruhig.

Gruß
Loon3y
 
Hi,

vielen dank für deine Hilfe erst mal ;-)

"Position: absolute" habe ich bei A deswegen gesetzt, weil vorher die Elemente der Sidebar (A) beim Verkleinern des Browsern unter das Element von B gerutscht sind und nur noch darunter lesbar waren.
Wenn ich "pt" nicht verwenden soll, was dann!? und in welchem verhältnis?!

LG
Shanai
 
Werbung:
Du hast in einem anderen Forum bereits passende Antworten erhalten. Und pt ist für Drucksachen gedacht, nicht für Webseitenausgabe am Bildschirm.
 
Waoh, in einem anderen Forum ist gut. Der Thread scheint in mindestens 4 oder 5 anderen Foren zu stehen.

Ehrlich, das ist unfair den Helfern gegenüber. Sie nehmen sich die Zeit, eine Lösung für dich zu suchen, obwohl diese vielleicht schon längst gefunden wurde.
 
Werbung:
wobei ich eigentlich die Lösung oben schon geschrieben habe -_-"

eventuelle sollte man nochmal auf die Grundlagen von HTML / CSS verweisen. Wer diese nicht beherrscht, kann noch so viele gleichnamige Threads aufmachen, dass Ergebniss wird immer unbefriedigend sein (weil mans nicht versteht).


Gruß
Loon3y
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben