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

Mehrere Sachen Html/CSS

J

Jinnai

Neues Mitglied
Hallo Leute,

ich hab gerade folgendes Problem, bei der Homepage die ich momentan erstelle, greife ich seit langem mal wieder auf Div-Container und bin entsprechend in der Benutzung dieser, sowie in CSS eingerostet.

Nun habe ich alles soweit hinbekommen, ausser meine "Abstandhalter", diese werden nämlich nicht angezeigt.

Hier mal der Html Code

Code: 
<body>
<div id="wrapper">
	<div id="header"></div> <!-- Header -->
    <div id="adresse"></div> <!-- Zeile für die Adresse -->
    	<div id="content">	<!-- Content Beginn -->
    		<div id="abstand1"></div>
    		<div id="menu_box">
            	<!-- Navi Anfang -->
            	<div id="navi_head"></div>
                <div id="navi"></div>
                <div id="navi_foot"></div>
                <!-- Navi Ende -->
                
                <!-- Öffnungszeiten -->
                <div id="open_head"></div>
                <div id="open"></div>
                <div id="open_foot"></div>
            </div>
            <div id="abstand2"></div>
            <div id="content_box">
            	<div id="content_head"></div>
                <div id="content_inhalt"></div>
                <div id="content_foot"></div>
            </div>
            <div id="abstand3"></div>
            <div id="leistung_box">
            	<div id="leistung_head"></div>
                <div id="leistungen"></div>
                <div id="leistung_foot"></div>
            </div>
            <div id="abstand4"></div>
		</div> <!-- Content Ende -->
       	<div class="clear"></div>
        <div id="footer"></div>
</div>
</body>

Und hier meine Stylesheet

Code: 
@charset "utf-8";

body {
	background-color:#244e79;
	margin:0px;
}

.clear {
	clear:both;
}

#wrapper {
	width:902px;
	height:auto;
	margin:auto;
}

#header {
	background-image:url(Bilder/header.gif);
	width:902px;
	height:135px;
}

#adresse {
	width:902px;
	height:15px;
	background-image:url(Bilder/addy.gif);
}

#content {
	width:902px;
	height:auto;
}

#abstand1 {
	width:11px;
	height:auto;
	float:left;
	background-image:url(Bilder/abstand1.gif);
}
#abstand2 {
	width:16px;
	height:auto;
	float:left;
	background-image:url(Bilder/abstand2.gif);
	background-repeat:repeat;
}

#abstand3 {
	width:20px;
	height:auto;
	float:left;
	background-image:url(Bilder/abstand5.gif);
	background-repeat:repeat;
}

#abstand4 {
	width:11px;;
	height:auto;
	float:left;
	background-image:url(Bilder/abstand6.gif);
	background-repeat:repeat;
}

#menu_box {
	width:179px;
	height:auto;
	float:left;
}

#navi_head {
	width:179px;
	height:40px;
	background-image:url(Bilder/menu1.gif);
}

#navi {
	width:179px;
	height:auto;
	background-image:url(Bilder/menufield.gif);
}

#navi_foot {
	width:179px;
	height:4px;
	background-image:url(Bilder/menu2.gif);
}

#open_head {
	width:179px;
	height:48px;
	background-image:url(Bilder/offnungszeiten1.gif);
}

#open {
	width:179px;
	height:auto;
	background-image:url(Bilder/offfield.gif);
}

#open_foot {
	width:179px;
	height:4px;;
	background-image:url(Bilder/offnungszeiten2.gif);
}

#content_box {
	width:486px;
	height:auto;
	float:left;
}

#content_head {
	width:486px;
	height:14px;
	background-image:url(Bilder/content_head.gif);
}

#content_inhalt {
	width:486px;
	height:auto;
	background-image:url(Bilder/content2.gif);
}

#content_foot {
	width:486px;
	height:4px;
	background-image:url(Bilder/content3.gif);
}

#leistung_box {
	width:179px;
	height:auto;
	float:left;
}

#leistung_head {
	width:179px;
	height:40px;
	background-image:url(Bilder/leistungen1.gif);
}

#leistungen {
	width:179px;
	height:auto;
	background-image:url(Bilder/leistungenfield.gif);
}

#leistung_foot {
	width:179px;
	height:4px;
	background-image:url(Bilder/leistungen2.gif);
}

#footer {
	width:902px;
	height:27px;;
	background-image:url(Bilder/footer.gif);
}

Was habe ich bei den id's Abstand1-4 falsch gemacht, dass diese nicht angezeigt werden?
Bevor ich es vergesse, die Abstandhalter sollen automatisch in die Höhe gezogen werden.

Hoffe Ihr könnt mir da helfen.

Gruß
Jinnai
 
Hallo,

ok das nicht oft mit css arbeitest hättest nicht extra schreiben brauchen, das sieht man :O).
die #abstand1-4 machen kein sinn, das macht man mit margin/padding von z.b. #content_box
die Abstandhalter sollen automatisch in die Höhe gezogen werden.
Zum Vergrößern anklicken....
ohne Inhalt wie soll es eine höhe bekommen und zweitens wieso soll ein reiner platzhalt sich in der höhe anpassen.

ach so, ein bild oder Link hilft schneller, bei mir sieht dein code so aus. das geht eigentlich von den #abstand1-4 abgesehen.

Aufzeichnen.JPG

Cheffchen
 
Hey Cheffchen,

ich habe die 4 id's "Abstand" genannt, weil mir nichts besseres für eingefallen ist. In #abstand1 und #abstand4 ist jeweils ein Bild drin, bei #abstand2 und #abstand3 hast du natürlich recht, dass man es auch mit margin/padding macht (wobei ich dafür auch extra Bilder hab).

Problem ist halt, dass in #abstand1+4 der "Homepagerand" ist. Hab zur Visualisierung, und damit man sieht was ich meine, das momentane Design geuppt (weiß leider nicht wie das mit den Anhängen funktionieren soll).

Homepagebild

Und links und rechts die schwarzen Ränder sollen sich mit der Homepage dehnen, was sie aber wie gesagt nicht tun.
 
Hallo,

jetzt verstehe ich gar nichts mehr.
Das Bild was hochgespielt hast ist das CI, also der Grafik Entwurf der umgesetzt werden soll?
Und links und rechts die schwarzen Ränder sollen sich mit der Homepage dehnen, was sie aber wie gesagt nicht tun.
Zum Vergrößern anklicken....
was ist links/rechts bei Dir?
(rechts steht bei mir ist ein Glas mit Trinken und eine Maus :O) )
Anhang anzeigen 1965


Ach so Bilder ganst hochladen wenn im Menü über der eingabemaske darauf klickst ->
insertimage.png


Cheffchen
 
Das war glaube ich Werbung was du gesehen hast. ^^

Nochmal ein Bild

Habe das Design mal auf einen größeren Hintergrund gelegt. Da siehst du, dass das Design von einem schwarzem Rand umgeben ist, dieser befindet sich im Contentbereich in #abstand1 und #abstand4, und der soll sich mitstrecken. Anders kann ich es jetzt leider auch nicht mehr formulieren/zeigen. :-/
 
Hallo,

ah, also 2. Jetzt ist klar was meinst.
da gibt es mehrere möglichkeiten.
1. entweder einfach beim #wrapper ein border machen. dann siehts aus wie auf dein Bild.
In abstand natürlich nichts anzeigen lassen, sind halt reine platzhalter die auch dann raus könnten oder lass sie drin is eigentlich egal.
Code: 
#wrapper {
 width:902px;
 height:auto;
 margin:auto;
 border:1px #000 solid; /* <-- */
}

Cheffchen
 
Hey Cheffchen,

danke für die Hilfe schon mal, hat funktioniert und hab jetzt die id's #abstand1-4 raus genommen. Hab jetzt aber noch ein Problem gefunden, wenn ich den div-container mit der id #content_inhalt2 mit inhalt fülle, zerreist es mir das Design.

14cs7tg.jpg


HTML: 
<div id="content_box">
            <div id="content_head"></div>
            <div id="content_inhalt1">
                <div id="content_inhalt2"><h1>Neuigkeiten</h1></div>
            </div>
            <div id="content_foot"></div>
</div>

Code: 
#content_box {
	width:486px;
	height:auto;
	float:left;
}

#content_head {
	width:486px;
	height:14px;
	background-image:url(Bilder/content_head.gif);
}

#content_inhalt1 {
	width:486px;
	height:auto;
	background-image:url(Bilder/content2.gif);
}

#content_inhalt2 {
	width:486px;
	height:auto;
	margin-left:6px;
	margin-right:6px;
}

#content_foot {
	width:486px;
	height:4px;
	background-image:url(Bilder/content3.gif);
}

Ich habe die id #content_inhalt2 eingefügt, damit ich den Text der an Ende da stehen soll auch verschieben kann mit margin, wenn das auch ohne eine 2. id funktioniert, wüsst ich das auch gerne. :o)
 
Hallo,

ich will jetzt nichts sagen, hab aber daruf gewartet das dies passiert :O).
Ist nichts schlimmes.
Dir fehlt einfach eine/deine reset.css. kannst ja wenn lust hast auch mal einfach googlen.

Ich habe da eine eigene die ich an meiner Arbeitsweise angepasst habe und meine standards schon enthält (Schriftgrößen/Farben/Abstände).
Das ist genau dein Problemchen z.b. h1-h6 und p haben alle padding und margin abstände. mach die mal auf 0 am anfang deiner css und dann kannst ja weitr unten wenn gebraucht für bestimmt diese wieder einfügen.
* {
margin: 0;
padding: 0;
}
Zum Vergrößern anklicken....

das mit den 2 div und margin ist nicht so toll aber einfach, ich bin auch so faul. Sonst müsstest mit padding Arbeiten und css für jeden browser anders.

Cheffchen
 
Hey Cheffchen,

danke, auf die gloreiche Idee bin ich nach knapp 20 Minuten rumwuchteln auch gekommen. :D"

Damit hatt sich der Thread eigentlich erledigt, da das Gerüst nun steht. Eine Fragen habe ich aber trotzdem noch, an das "allwissende" Cheffchen! :D *gg*

Welches CMS würdest du mir für eine Unternehmenshomepage empfehlen? (abgesehen von Typo3) Kann mich auf keines festlegen und Typo3 erscheint mir gerade zu komplex um es mal eben über Nacht zu können.

Gruß
 
Ich lass dir an meiner Allwissenheit teilhaben :O)
Im Free Bereich finde ich Redaxo.org echt super von 3-3000 Seiten :O).
Ist total easy und mit sehr wenig PHP kannst da eine Homepage bauen. Später bei der Pflege natürlich nicht :O).

Das mit Typo gebe ich dir recht, mach ich auch jedes Jahr ein versuch und las es dann doch wieder sein.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben