Antworten auf deine Fragen:
Neues Thema erstellen

Aufbau der Elemente

S

Shanai

Noch nicht viel geschrieben

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

Anhang:
* (IST)
* (SOLL)
 

S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Hi,

schon mal danke im Vorraus für deine Bemühungen
icon_wink.gif


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
 
B

blizzart88

Guest

AW: Aufbau der Elemente

Shanai schrieb:
Hi,

schon mal danke im Vorraus für deine Bemühungen
icon_wink.gif


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
Zum Vergrößern anklicken....

Vielleicht ist die absolute Positionierung in Element A dafür verantwortlich?
 
S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Das habe ich mir auch schon gedacht, allerdings brauche ich die absolute Positionierung, weil sonst Element A unter Element B beim verkleinern des Browser rutscht!

glg
Shanai
 
B

blizzart88

Guest

AW: Aufbau der Elemente

Ich bin mir nicht sicher, aber probier es mal mit
Code: 
float:
, vielleicht hilft das etwas.
 
S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Hab ich auch schon probiert ;-)

Es ist hoffnungslos, ich glaube ich komme nie zu der Lösung :'(
 
M

MatthiasM2D

Nicht mehr ganz neu hier

AW: Aufbau der Elemente

Hi,

na ganz so schwer ist es ja dann auch nicht ;) Frage vorab, soll die Box (Content) denn dynamisch in ihrer Breite sein? Da du hier immer von Browser verkleinern redest.

Gruß
 
S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Also die Box "B" mit dem Content sollte sich halt einfach verkleinern von der Breite her und der Text sollte auch dem entsprechend angepasst werden beim Verkleinern des Browsers. Dabei sollten aber A und C immer gleich breit sein.

lg
 
M

MatthiasM2D

Nicht mehr ganz neu hier

AW: Aufbau der Elemente

Hi,

hier mal auf die schnelle etwas umgeändert:

CSS:
Code: 
#wrap{
    float: left;
    width: 100%;
}

#mw_content  {
    margin: 0 15em 0 14em; 
    background-color: #EAECEB;
    border-top: solid 1px #EAECEB;
    border-left: solid 1px #EAECEB;
    border-bottom: solid 1px #EAECEB;
}

#mw_portlets {
    float: left;
    width: 14em; 
    margin-left: -100%;
    margin-top: 10.5em;
    background: #C8FC98;
}

#sidebar {
    float: left;
    width: 15em; 
    margin-left: -15em; 
    margin-top: 10.5em;
    background: #FDE95E;
}

HTML:
Code: 
<div id="wrap">
<div id="mw_content">
<b>A</b>
</div>
</div>

<div id="mw_portlets">
<b>B</b>

</div>

<div id="sidebar">
<b>C</b>
</div>

Hoffe das hilft Dir weiter. Beachte, das das Margin der Contentbox mit der Größe der jeweiligen Boxen übereinstimmen sollte. Wenn du dir entsprechende Freiräume schaffen möchtest, dann würde ich dir empfehlen weitere Boxen in die Boxen zu packen und mit entsprechenden Auffüllungen bei den Elternelementen zu arbeiten.

Bei weiteren Fragen einfach melden.:)

Gruß
 
S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Hi,
also ich dank die viiiiiiiiiiiielmals fuer deine Hilfe!!! :daumenhoch:

Leider muss ich dich enttäuschen, es klappt immer noch nicht :-(

Mein CSS sieht jetzt so aus:
Code: 
#wrap {
    float: left;
    width: 100%;
}

#mw_content {
    margin: 7em 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;
}

#mw_portlets {
    width: 14em;
    margin-top: 10.5em;
    position: absolute;
    float: left;
    margin-top: 10.5em;
    background: #C8FC98;
}

#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;
    float: left;
    width: 15em; 
    background: #FDE95E;
}

#sidebar2i {
    float: left;
    width: 15em; 
    color: #575855;
    font-size: 10pt;
    margin-left: -15em; 
    margin-top: 10.5em;
    background: #FDE95E;
}

Was mach ich nur falsch?!

glg
Shanai
 
M

MatthiasM2D

Nicht mehr ganz neu hier

AW: Aufbau der Elemente

Hi,

das HTML hast du auch entsprechend angepasst? Poste bitte nochmal deinen HTML Code dazu. Wichtig ist, das das DIV mit der id=wrap um das div mit der id=mw_content gelegt wird.

Mir fällt spontan auf, das MW Content nicht die Aufüllungen nach außen beinhaltet: margin: 0 15em 0 14em; Das ist sehr wichtig, da sonst das ganze nicht funktioniert.

Gruß
Matthias
 
S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Also ich hab halt in der PHP-Datei einen WRAP um das mw_content gemacht, meinst du das?! habe ich die PHP-Datei mit dem HTML-Code.
 
M

MatthiasM2D

Nicht mehr ganz neu hier

AW: Aufbau der Elemente

Hi,

ist die Seite irgendwo online? Würde gerne mal die reine Ausgabe im Browser sehen. Sehe aktuell nur den mw_contentwrapper welcher um mw_content liegt, aber leider findet sich die Klasse nicht im geposteten CSS.

Gruß
 
S

Shanai

Noch nicht viel geschrieben

AW: Aufbau der Elemente

Bei der Seite handelt es sich leider um ein Intranet, aber wenn du magst, kann ich dir den Quelltext zuschicken?!

glg
Shanai
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 196 (Mitglieder: 6, Gäste: 190)
Robots: 987

Statistik des Forums

Themen
118.565
Beiträge
1.538.065
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben