zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden einigermassen anständiges CSS?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.06.2008, 10:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2006
Beiträge: 51
wurzelchensen befindet sich auf einem aufstrebenden Ast
Standard einigermassen anständiges CSS?

Hallo Forum,

ich habe mir eine CSS-Vorlage geholt und ein wenig abgeändert (HOWTO4ALL.de).

Den Header habe ich in zwei Teile separiert, das ist alles. Jedoch ist es so, dass es mir wenn ich z.B. den Texten im Header mit "padding" einen Abstand geben will, zerreisst es mir alles.

Auch möchte ich gerne dem Text im Footer einen Abstand geben, aber dann kachelt es mir das Hintergrundbild.

Könnt Ihr mir bitte schauen ob der Header sauber geteilt wurde (float left ...)?

Bin gespannt auf eure Antworten.

lg

Wurzelchensen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.06.2008, 10:17
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Hi!

Hm, wo sollen wir schauen? *Augenreib*
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.06.2008, 10:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2006
Beiträge: 51
wurzelchensen befindet sich auf einem aufstrebenden Ast
Standard

hier ist der Code:
Code:
html {
	min-height: 100%;
	background-color: #E6F3FF;
}

* {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#clearer {clear: both; font-size: 0;}
#left {
	float: left;
	margin-top: 10px;
	margin-left: 20px;
}

#inner-container {
	font-size: 1.2em;
	margin: 0 auto;
	padding: 10px;
	width: 816px;
	margin-top: 8px;
}

#outer-container {
	padding-bottom: 14px;
	background-color: #E6F3FF;
}

#header {
	height: 115px;
	float: left;
	background-image: url(../images/header_links.png);
	width: 508px;
}

#header-right {
	height: 115px;
	background-image: url(../images/header_rechts.png);
	width: 308px;
	float: left;
}

#navigation {
	height: 25px;
	clear: left;
	background-image: url(../images/menu.png);
	padding-left: 30px;
	padding-top: 6px;
}

#content {
	height: 600px;
	margin-top: 0px;
	background-image: url(../images/body.png);
	padding-left: 30px;
	padding-top: 15px;
}



#footer {
	margin-top: 0px;
	background-image: url(../images/footer.png);
	height: 51px;
}
#footer a {
color: #000000;
text-decoration: none;
}




<body>
<div id="outer-container">

<div id="inner-container">

<div id="header">
<h1>Header</h1>
</div>

<div id="header-right">
<h1>Header right</h1>
</div>

<div id="navigation">
<h1>Menu</h1>
</div>

<div id="content">
<h1>Content</h1>

</div>
<div id="clearer"></div>

<div id="footer">
<span id="left">
<a href="http://www.howto4all.de/">Zur freien Verwendung bereitgestellt von HOWTO4ALL.de</a>.
</span>
<div id="clearer"></div>
</div>

</div>

</div>

</body>
Mit Zitat antworten
  #4 (permalink)  
Alt 11.06.2008, 10:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2006
Beiträge: 51
wurzelchensen befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von paracelsus Beitrag anzeigen
Hi!

Hm, wo sollen wir schauen? *Augenreib*
Hab's auch grad gemerkt
Mit Zitat antworten
  #5 (permalink)  
Alt 11.06.2008, 11:12
Benutzer
neuer user
 
Registriert seit: 10.05.2006
Beiträge: 32
Peter Buenemann befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich weiß nicht, wie das letztendlich aussehen soll, deshalb nur zwei Anmerkungen.

Du hast beim #inner-container eine Breite von 816px angegeben. Die beiden Header haben einen Breite von 508px (#header) bzw. 308px (#header-right). Gibt zusammen für die Header eine Breite von 816px.
Beide Header passen also nebeneinander in deinen Container. Wenn du nun aber einem der Header ein padding von 10px gibst, dann werden diese 10px der Breite hinzugerechnet. Dein #header-right hätte dann z.B. eine Gesamtbreite 328px. Somit passen beide Header nicht mehr nebeneinander in deinen Conatiner. #header-right rutscht nach unten.

Mehr Informationen dazu findest zu z.B. hier:
Peter Kropff - CSS - Grundlagen - Das Box-Modell

oder mit der Suchmaschinen deiner Wahl unter dem Stichwort CSS Boxmodel.

Hintergrundbilder kacheln per Voreinstellung. Wenn du also deine Footer Box vergrößerst dann wird das Hintergrundbild solange wiederholt, bis der komplette Bereich ausgefüllt ist.
Mehr Informationen dazu findest du z.B. hier:
SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder


Gruss Peter
__________________
OpenComp
Mit Zitat antworten
  #6 (permalink)  
Alt 11.06.2008, 11:15
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Womit alles gesagt ist.
Mit Zitat antworten
  #7 (permalink)  
Alt 11.06.2008, 11:16
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

dein #inner-container ist 816px breit. #header und#header-right sind auch zusammen 816px breit.

Da man padding/border/margin immer zu width hinzurechnen muss, um die wahre Breite einer Box zu ermitteln, zerreißt es dir natürlich bei Zugabe von padding das Layout, weil die Box dann zu breit ist.

Die Lösung mit dem footer finde ich auch nicht so dolle, weil da nur Inline-Elemente drin sind (span, a).

Ich würde das a in ein p packen, das p nicht floaten (warum das span floatest hat sich mir nicht so erschlossen).

Die Grafik kannst du #footer z.B. zuweisen, evtl mit height für #footer.
Positionieren kannst du dann mit text-align und etwas padding/margin.

Gruß
Klaus

edit. Mist, viel zu spät
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 11.06.2008, 13:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.10.2006
Beiträge: 51
wurzelchensen befindet sich auf einem aufstrebenden Ast
Standard

Danke Leute! Ich weiss eure Antworten zu schätzen!

Mir hat soeben einiges gedämmert

Die Tutorials von peterkropff.de (Link kann nicht genug gepostet werden) sind echt klasse!

Danke an ein grossartiges Forum mit grossartigen Leuten.

lg

W.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 03:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:34 Uhr.