WinFuture-Forum.de: Anfänger Fragen Zu Css Update Neues Problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Anfänger Fragen Zu Css Update Neues Problem


#1 Mitglied ist offline   Kasperlino 

  • Gruppe: Mitglieder
  • Beiträge: 9
  • Beigetreten: 21. Mai 10
  • Reputation: 0

geschrieben 13. Juni 2010 - 12:39

Guten Tag,

Ich versuche meine eigene Webseite zu erstellen, bin dabei aber leider auf ein Problem bei der Positionierung von Divs gestoßen und konnte dieses trotz Recherche auf CSS4You bisher noch nicht lösen.

Ich hab hier mal eine Testseite angelegt um mein Problem zu verdeutlichen.

klick mich :D

Eigentlich hatte ich beabsichtig, dass dort zwei Balken erscheinen. Ein roter und ein schwarzer, die Platz für das Menu und den Header bieten, allerdings überlagern sich diese anscheinend.

Ich hoffe Ihr könnt mir helfen.

lg Kasperlino

Dieser Beitrag wurde von Kasperlino bearbeitet: 13. Juni 2010 - 14:44

0

Anzeige



#2 Mitglied ist offline   cien 

  • Gruppe: aktive Mitglieder
  • Beiträge: 363
  • Beigetreten: 01. Dezember 04
  • Reputation: 36
  • Geschlecht:Männlich
  • Wohnort:Niedersachsen

geschrieben 13. Juni 2010 - 13:02

hier mal eine lösung:

als erstes der xhtml-code:

Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>

<div id="layer">

<div id="header">

<div id="top"></div> <!-- top -->

<div id="middle"></div> <!-- middle -->

<div id="bottom"></div> <!-- bottom -->

</div> <!-- header -->

<div id="main"></div> <!-- main -->

<div id="footer"></div> <!-- footer -->

</div> <!-- layer -->

</body>

</html>


und hier das css:

Zitat

* {
margin: 0; padding: 0;
}

#layer {
margin: 0 auto; width: 900px; background: blue;
}

#header {
height: 90px;
}

#header #top {
height: 30px; background: red;
}

#header #middle {
height: 30px; background: black;
}

#header #bottom {
height: 30px;
}

#main {
height: 180px;
}

#footer {
height: 90px;
}


wäre mein vorschlag!

viele grüße

cien
Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!
0

#3 Mitglied ist offline   Kasperlino 

  • Gruppe: Mitglieder
  • Beiträge: 9
  • Beigetreten: 21. Mai 10
  • Reputation: 0

geschrieben 13. Juni 2010 - 13:29

Danke für die Lösung. Das kann ich bis auf dem Footer eigentlich so übernehmen.

lg Kasperlino
0

#4 Mitglied ist offline   cien 

  • Gruppe: aktive Mitglieder
  • Beiträge: 363
  • Beigetreten: 01. Dezember 04
  • Reputation: 36
  • Geschlecht:Männlich
  • Wohnort:Niedersachsen

geschrieben 13. Juni 2010 - 14:22

jo - gern geschehen :rolleyes:

da du anfänger bist - bin ich übrigens auch noch - so fast, empfehle ich dir folgende bücher:

Jetzt lerne ich HTML: von Anfang an, HTML easy. Spielend gelingt die Website,
Jetzt lerne ich CSS: Webdesign mit Cascading Style Sheets

viele grüße

cien

Dieser Beitrag wurde von cien bearbeitet: 13. Juni 2010 - 14:28

Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!
0

#5 Mitglied ist offline   Kasperlino 

  • Gruppe: Mitglieder
  • Beiträge: 9
  • Beigetreten: 21. Mai 10
  • Reputation: 0

geschrieben 13. Juni 2010 - 14:41

Danke für die Tipps;)

Ich habe nochmal eine neue Frage.
Wie kann ich dieses Problem mit dem Rahmen lösen?

gruß

Kasperlino
0

#6 Mitglied ist offline   cien 

  • Gruppe: aktive Mitglieder
  • Beiträge: 363
  • Beigetreten: 01. Dezember 04
  • Reputation: 36
  • Geschlecht:Männlich
  • Wohnort:Niedersachsen

geschrieben 13. Juni 2010 - 15:02

was soll da mit dem rahmen passieren?
Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!
0

#7 Mitglied ist offline   AmericanSpirit 

  • Gruppe: aktive Mitglieder
  • Beiträge: 102
  • Beigetreten: 14. Mai 08
  • Reputation: 0

geschrieben 13. Juni 2010 - 15:11

der rahmen hört zu spät auf, denke mal das da der fehler sein soll.
naja des problem ist gleich gelöst beim div mit der id rahmen keine höhe festlegen.
height:100% gibt an das der rahmen immer so hoch sein soll wie das bild von browser.
falls du firefox benutz kann ich dir des addon firebug empfehlen, damit kann man super temporär webseiten ändern, naja schaus dir einfach an dann weist du was ich mein -.-

Dieser Beitrag wurde von AmericanSpirit bearbeitet: 13. Juni 2010 - 15:11

0

#8 Mitglied ist offline   cien 

  • Gruppe: aktive Mitglieder
  • Beiträge: 363
  • Beigetreten: 01. Dezember 04
  • Reputation: 36
  • Geschlecht:Männlich
  • Wohnort:Niedersachsen

geschrieben 13. Juni 2010 - 15:14

ach so - okay - ich arbeite hier mit einem 23" 1920x1080 monitor, da fiel mir das nicht so auf, dachte es gehört so :rolleyes:

viele grüße

cien
Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!
0

#9 Mitglied ist offline   AmericanSpirit 

  • Gruppe: aktive Mitglieder
  • Beiträge: 102
  • Beigetreten: 14. Mai 08
  • Reputation: 0

geschrieben 13. Juni 2010 - 15:16

naja ich hab nen 22" mit 1650x1050 ^^
ist mir aber dank firebug aufgefallen da sobald ich firebug aufgemacht habe der rahmen davon beeinflusst wurde, also browser minimiert und in der höhe verstellt ^^
0

#10 Mitglied ist offline   cien 

  • Gruppe: aktive Mitglieder
  • Beiträge: 363
  • Beigetreten: 01. Dezember 04
  • Reputation: 36
  • Geschlecht:Männlich
  • Wohnort:Niedersachsen

geschrieben 13. Juni 2010 - 15:29

jupp, jetzt hab ich es auch erkannt - aber deine lösung passt ja! wobei ich persönlich "rahmen" eh keine höhe geben würde, da sich "rahmen" ja den inhalt-divs, in der höhe, anpasst!

oder liege ich da design-technisch daneben weil ein anderer effekt erzeugt werden sollte?

hmmm...

vg

cien

Dieser Beitrag wurde von cien bearbeitet: 13. Juni 2010 - 15:31

Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!
0

#11 Mitglied ist offline   Kasperlino 

  • Gruppe: Mitglieder
  • Beiträge: 9
  • Beigetreten: 21. Mai 10
  • Reputation: 0

geschrieben 13. Juni 2010 - 17:09

Hey,

Danke für die Antworten, dass mit der Höhe funktioniert..nur würde ich gerne auf seiten auf denen nicht soviel Text vorhanden ist, die Höhe trotzdem auf Browsergröße anpassen, gibt es da irgendeine Möglichkeit?

Ich möchte das nicht für jede Seite einstellen müssen.

gruß

Kasperlino

Dieser Beitrag wurde von Kasperlino bearbeitet: 13. Juni 2010 - 17:10

0

#12 Mitglied ist offline   cien 

  • Gruppe: aktive Mitglieder
  • Beiträge: 363
  • Beigetreten: 01. Dezember 04
  • Reputation: 36
  • Geschlecht:Männlich
  • Wohnort:Niedersachsen

geschrieben 13. Juni 2010 - 22:11

min-height und max-height kannst du dafür verwenden!

z. b. 

#rahmen {
min-height: 100%
}


dann ist die rahmen-höhe immer 100% des browsers.

aber ich rate dir davon ab! irgendwann kommt der moment, wo du wieder das alte problem mit dem rahmen hast, nämlich dann, wenn jemand mit einer kleineren auflösung deine seite ansurft. dann hört der rahmen wieder früher auf als er soll! eine abhilfe würde bringen, wenn du jetzt jedem inhalt-div eine variable höhe zuordnest.

bleib auf der einfachen seite, dass erspart dir ärger beim coden und du kannst mehr inhalt auf die seite bringen! es gibt kaum eine seite, die nicht scrollbar ist. möchtes du das vermeiden, gehe in die breite und nutze den gesamten browser oder code mit flash oder ähnlichem.

schau dir meine vereinsseite an, oder die anderen die über links auf der seite erreichbar sind. alles berüht auf einer festgelegten höhe und breite! letztendlich bist du es, der über das aussehen und die benutzbarkeit deiner seite bestimmt! je aufwendiger du codest um so schwerer wird die pflege!

ist nur meine meinung und mein rat, was du tust bleibt dir überlassen!

vg

cien

Dieser Beitrag wurde von cien bearbeitet: 13. Juni 2010 - 22:14

Grüße
Cien

Ich bin notorischer Kleinschreiber! Also nicht wundern!
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0