zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Design soll sich dem Content anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2009, 19:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2009
Beiträge: 5
hujuzka befindet sich auf einem aufstrebenden Ast
Standard CSS Design soll sich dem Content anpassen

Hallo,

ich habe ein Problem mit meinem Design.

Mit CSS selbst und DIV Containern beschäftige ich mich erst seit kurzem, ich versuche also gerade zu lernen Also habt ein wenig Nachsicht.

Folgendes Problem:

Ein Bekannter hat mit Photoshop ein Design erstellt, dieses "gesliced" und mit PS ein CSS Desgin gemacht. Ich mache für diese Seite nun den Code (soll komplett in PHP werden) und habe ein Problem mit der Darstellung des Contents. In der Mitte (in meinem Beispiel grau hinterlegt) soll der Inhalt angezeigt werden. Wenn ich jetzt jedoch einen längeren Text schreibe, "wächst" dieser Bereich nicht mit. Dazu kommt, dass der "Footer" des Designs ja auch mit nach unten wandern soll. Da ich mit CSS noch nicht so gut klarkomme habe ich den Durchblick verloren. Als ich sowas vorher mit Tabellen gemacht habe (oder halt header content und footer als eigene PHP Datei getrennt) war es kein Problem.

Code:
#body	    {
	background-color: #FCC31B;
 	margin: 0 auto;
}


#Tabelle_01 {
	position:relative;
	top:0px;
	margin: 0 auto;
	width:1000px;
	height:900px;
}

#index-01_ {
	position:absolute;
	background-image: url(Bilder/index_01.gif);
	left:0px;
	top:0px;
	width:10px;
	height:321px;
}

#index-02_ {
	position:absolute;
	background-image: url(Bilder/index_02.gif);
	left:10px;
	top:0px;
	width:528px;
	height:84px;
}

#index-03_ {
	position:absolute;
	background-image: url(Bilder/index_03.gif);
	left:538px;
	top:0px;
	width:357px;
	height:27px;
}

#index-04_ {
	position:absolute;
	background-image: url(Bilder/index_04.gif);
	left:895px;
	top:0px;
	width:23px;
	height:900px;
}

#index-05_ {
	position:absolute;
	background-image: url(Bilder/index_05.gif);
	left:918px;
	top:0px;
	width:82px;
	height:900px;
}

#index-06_ {
	position:absolute;
	background-image: url(Bilder/index_06.gif);
	left:538px;
	top:27px;
	width:357px;
	height:57px;
}

#index-07_ {
	position:absolute;
	background-image: url(Bilder/index_07.gif);
	left:10px;
	top:84px;
	width:90px;
	height:237px;
}

#index-08_ {
	position:absolute;
	background-image: url(Bilder/index_08.gif);
	left:100px;
	top:84px;
	width:93px;
	height:45px;
}

#index-09_ {
	position:absolute;
	background-image: url(Bilder/index_09.gif);
	left:193px;
	top:84px;
	width:88px;
	height:45px;
}

#index-10_ {
	position:absolute;
	background-image: url(Bilder/index_10.gif);
	left:281px;
	top:84px;
	width:188px;
	height:45px;
}

#index-11_ {
	position:absolute;
	background-image: url(Bilder/index_11.gif);
	left:469px;
	top:84px;
	width:183px;
	height:45px;
}

#index-12_ {
	position:absolute;
	background-image: url(Bilder/index_12.gif);
	left:652px;
	top:84px;
	width:104px;
	height:45px;
}

#index-13_ {
	position:absolute;
	background-image: url(Bilder/index_13.gif);
	left:756px;
	top:84px;
	width:139px;
	height:45px;
}

#index-14_ {
	position:absolute;
	background-image: url(Bilder/index_14.gif);
	left:100px;
	top:129px;
	width:369px;
	height:192px;
}

#index-15_ {
	position:absolute;
	background-image: url(Bilder/index_15.gif);
	left:469px;
	top:129px;
	width:426px;
	height:192px;
}

#index-16_ {
	position:absolute;
	background-image: url(Bilder/index_16.gif);
	left:0px;
	top:321px;
	width:100px;
	height:149px;
}

#index-17_ {
	position:absolute;
	background-image: url(Bilder/index_17.gif);
	left:100px;
	top:321px;
	width:25px;
	height:218px;
}

#index-18_ {
	position:absolute;
	background-image: url(Bilder/index_18.gif);
	left:125px;
	top:321px;
	width:344px;
	height:87px;
}

#index-19_ {
	position:absolute;
	background-image: url(Bilder/index_19.gif);
	left:469px;
	top:321px;
	width:390px;
	height:128px;
}

#index-20_ {
	position:absolute;
	background-image: url(Bilder/index_20.gif);
	left:859px;
	top:321px;
	width:36px;
	height:204px;
}

#index-21_ {
	position:absolute;
	background-image: url(Bilder/index_21.gif);
	left:125px;
	top:408px;
	width:344px;
	height:41px;
}

#index-22_ {
	position:absolute;
	background-image: url(Bilder/index_22.gif);
	left:125px;
	top:449px;
	width:734px;
	height:21px;
}

#index-23_ {
	position:absolute;
	background-image: url(Bilder/index_23.gif);
	left:0px;
	top:470px;
	width:100px;
	height:218px;
}

#index-24_ {
	position:absolute;
	left:125px;
	top:470px;
	margin: 0 auto;
	background-color: #C0C0C0;
	width:734px;
	height:261px;
}


#index-25_ {
	position:absolute;
	background-image: url(Bilder/index_25.gif);
	left:859px;
	top:525px;
	width:36px;
	height:60px;
}

#index-26_ {
	position:absolute;
	background-image: url(Bilder/index_26.gif);
	left:100px;
	top:539px;
	width:25px;
	height:47px;
}

#index-27_ {
	position:absolute;
	background-image: url(Bilder/index_27.gif);
	left:859px;
	top:585px;
	width:36px;
	height:1px;
}

#index-28_ {
	position:absolute;
	background-image: url(Bilder/index_28.gif);
	left:100px;
	top:586px;
	width:25px;
	height:314px;
}

#index-29_ {
	position:absolute;
	background-image: url(Bilder/index_29.gif);
	left:859px;
	top:586px;
	width:36px;
	height:300px;
}

#index-30_ {
	position:absolute;
	background-image: url(Bilder/index_30.gif);
	left:0px;
	top:688px;
	width:10px;
	height:212px;
}

#index-31_ {
	position:absolute;
	background-image: url(Bilder/index_31.gif);
	left:10px;
	top:688px;
	width:90px;
	height:212px;
}

#index-32_ {
	position:absolute;
	background-image: url(Bilder/index_32.gif);
	left:125px;
	top:731px;
	width:734px;
	height:70px;
}

#index-33_ {
	position:absolute;
	background-image: url(Bilder/index_33.gif);
	left:125px;
	top:801px;
	width:734px;
	height:85px;
}

#index-34_ {
	position:absolute;
	background-image: url(Bilder/index_34.gif);
	left:125px;
	top:886px;
	width:770px;
	height:14px;
}
HTML-Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META http-equiv="Content-Language" content="pl" />

<LINK REL="stylesheet" HREF="body.css" TYPE="text/css"  />
<LINK REL="stylesheet" HREF="tables.css" TYPE="text/css"  />
</head>
<body id="body">

<div id="Tabelle_01">
	<div id="index-01_"></div>
	<div id="index-02_"></div>
	<div id="index-03_"></div>
	<div id="index-04_"></div>
	<div id="index-05_"></div>
	<div id="index-06_"></div>
	<div id="index-07_"></div>
	<div id="index-08_"><a href="index.php?action=2"><img src="Bilder/index_08.gif" border="0" /></a></div>
	<div id="index-09_"><a href="index.php?action=3"><img src="Bilder/index_09.gif" border="0" /></a></div>
	<div id="index-10_"><a href="index.php?action=4"><img src="Bilder/index_10.gif" border="0" /></a></div>
	<div id="index-11_"><a href="index.php?action=5"><img src="Bilder/index_11.gif" border="0" /></a></div>
	<div id="index-12_"><a href="index.php?action=6"><img src="Bilder/index_12.gif" border="0" /></a></div>
	<div id="index-13_"><a href="index.php?action=7"><img src="Bilder/index_13.gif" border="0" /></a></div>
	<div id="index-14_"></div>
	<div id="index-15_"></div>
	<div id="index-16_"></div>
	<div id="index-17_"></div>
	<div id="index-18_"></div>
	<div id="index-19_"></div>
	<div id="index-20_"></div>
	<div id="index-21_">titel</div>
	<div id="index-22_"></div>
	<div id="index-23_"></div>
	<div id="index-24_">inhalt</div>
	<div id="index-25_"></div>
	<div id="index-26_"></div>
	<div id="index-27_"></div>
	<div id="index-28_"></div>
	<div id="index-29_"></div>
	<div id="index-30_"></div>
	<div id="index-31_"></div>
	<div id="index-32_"></div>
	<div id="index-33_"></div>
	<div id="index-34_"></div>
</div>
</body>
</html>
Ich habe die Seite nochmal in den "Ursprungszustand" versetzt, also nur die index.html sowie die bilder seperat hochgeladen. http://homeofthepage.ho.ohost.de/ (Hab auf Wunsch der jungen Dame, der zukünftigen Besitzerin, ein Paar Sachen zensiert wegen Ihrem Namen etc.)

Hm wie immer habe ich zuviel geschrieben, hoffe jedoch, dass ihr versteht was ich meine und das es eine relativ schnelle und einfache Lösung gibt. Falls ihr noch mehr Informationen braucht oder eine andere Schilderung des Problems, nur zu

Mit freundlichem Gruß

Chris

Geändert von hujuzka (09.06.2009 um 23:56 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2009, 20:02
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

Hi,

um zu lernen wie modernes Webdesign funktioniert muss man das "Tabellendenken" ablegen.
Deinem Entwurf sieht man leider an, das du zwar divs hernimmst aber noch in Tabellen denkst, d.h. für dich gibt es wohl keine schnelle und einfache Lösung.

Dieses Zeichen:  heißt übrigens Byte Order Mark (BOM). Du brauchst einen Editor der ohne BOM speichern kann.
notepad++ kann das und kostet außerdem nix.

Alles mit position:absolute in den Viewport zu nageln ist für Anfänger verführerisch, aber führt i.d.R. nicht zum erwünschten Ergebnis.

Meistens bekommen Container keine feste Höhe, damit sie mit der Menge des Inhaltes dynamisch mitwachsen können.

Du wirst nicht umhin kommen ein vernünftiges Buch durchzuackern, um die Grundlagen modernen Webdesigns zu verstehen.
Little Boxes 1 ist bestens dazu geeignet.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2009, 20:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2009
Beiträge: 5
hujuzka befindet sich auf einem aufstrebenden Ast
Standard

Hm, dann sag ich jetzt einfach mal: Mist !

Ich werde mir dieses Buch mal zu gemüte führen. Danke dafür.

Kann man dieses Design denn noch irgendwie retten? Damit es die Funktion bekommt, die ich mir wünsche. Der Content wird nie wirklich lang, evtl. bei 2-3 Seiten kommt mal ein etwas längerer Text oder halt eine Bildergalerie. Gibt es dort evtl. eine alternative Variante? So eine art iFrame welches ich in dem Content Bereich einfüge und in dem ich dann je nach Bedarf nach unten scrollen kann.

Ich sehe schon, bin neu hier und mache direkt Probleme

Mit freundlichem Gruß

*edit

"Dieses Zeichen:  heißt übrigens Byte Order Mark (BOM). Du brauchst einen Editor der ohne BOM speichern kann.
notepad++ kann das und kostet außerdem nix."

Wo hast du dieses Zeichen denn jetzt gefunden, dass du darauf kommst? Das hat mich gerade ein wenig verwirrt

Geändert von hujuzka (09.06.2009 um 20:26 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2009, 20:43
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

Hi,

Zitat:
Zitat von hujuzka Beitrag anzeigen
Ich sehe schon, bin neu hier und mache direkt Probleme
hehe, kenn ich. War auch mal neu und hab direkt Probleme gemacht.
Ist normale Härte.

Zitat:
Zitat von hujuzka Beitrag anzeigen
Kann man dieses Design denn noch irgendwie retten?
Wenn das Design in PS entworfen wurde kann man das i.d.R. auch mit XHTML/CSS in eine funktionierende Website verwandeln.

In deinem Fall müßte allerdings schon der Quellcode umgeschrieben werden.
Deine Bilder sind eine Aufzählung und gehören semantisch in eine ul (ungeordnete Liste)

Ein div ist z.B. ein neutrales Blockelement, was dazu dient Elemente zu gruppieren, um dein Dokument sinnvoll zu strukurieren.

Das XHTML-Dokument enthält heutzutage nur die mit sinnvollen Tags ausgezeichneten Elemente und deren Inhalte, inkl. Doctype und head.
Für das Aussehen ist ausschließlich deine externe CSS-Datei zuständig.

Zum Positionieren sind nicht nur die Positionierungsarten und das Verständnis der optischen Auswirkungen notwendig, du mußt dich auch mit Float/Clear beschäftigen.

Das ist am Anfang mühevoll, weil man sich ne andere Denke antrainieren muss, aber es lohnt sich.

Wenn du das Buch durchhast, willst du es eh nicht mehr anders haben.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 09.06.2009, 20:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2009
Beiträge: 5
hujuzka befindet sich auf einem aufstrebenden Ast
Standard

Ich seh schon, das wird ein längerer Akt.

Die Sache ist halt, dass die Webseite schnellstmöglich fertig sein muss. Beim Code ansich habe ich schon einiges gemacht bzw. aus älteren Projekten was übernommen. Mir liegt auch keine PSD zur Verfügung um das slicen selbst zu übernehmen.

Muss also dieses Design mit dem vorhandenen Quellcode nehmen Jetzt auf die Schnelle mir das Buch durchzulesen (Bestellen etc.) bringt mir jetzt leider nicht so viel, ist wahrscheinlich in einer so kurzen Zeit garnicht möglich. Und wie ich mich kenne, werde ich es auch nicht direkt beim ersten Mal hinbekommen

Wie sieht es mit einer relativ "schicken" Alternative aus. Wie ich in dem vorherigen Post schon geschrieben habe, dass ich innerhalb des Content Bereichs scrollen kann. Es ist wirklich nie viel Text, evtl. 30 Zeilen, das ist aber auch das Maximum

Schade, dass ich mich mit dieser Seite ein wenig abehetzen muss, würde es gerne mit Hilfe des Buches machen.

Mit freundlichem Gruß
Mit Zitat antworten
  #6 (permalink)  
Alt 09.06.2009, 23:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2009
Beiträge: 5
hujuzka befindet sich auf einem aufstrebenden Ast
Standard

Habe meinen ersten Post mal editiert, habe ein paar Sachen geändert, der Übersicht halber. An der Struktur jedoch habe ich nichts geändert. Habe bei google mal nach einem Tutorial mit der Listenversion gesucht, jedoch werd ich daraus nicht schlau (NOCH nicht ! )

Hoffe ihr könnt mir jedoch noch bei meinem Problem helfen, dass sich das Design der Größe des Contents anpasst. Eine Alternative Lösung a la iFrame (oder evtl. gibts ja in CSS eine andere Lösung) ist im Notfall auch willkommen.

Mit freundlichem Gruß
Mit Zitat antworten
  #7 (permalink)  
Alt 10.06.2009, 09:13
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,

verzichte auf position:absolute, verzichte wenns irgend möglich auf Höhenangaben für deine Container, damit sie sich dynamisch anpassen können.

Wenn ich das Bild sehe ist durch die schwarzen Blöcke leider viel verdeckt.

Der orangene Verlauf kann ein HG-Bild sein, horizontal zentriert und mit entspr. Abstand nach oben.

Die grobe Struktur wäre ungefähr so:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="ich" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
   <title>Webseite</title>  
  <link rel="shortcut icon" type="image/x-icon" href="grafiken/favicon.ico" />
  <link rel="icon" type="image/png" href="grafiken/favicon.png" /> 
  <link type="text/css" rel="stylesheet" href="css/bildschirm.css" media="screen" />
  <link type="text/css" rel="stylesheet" href="css/druck.css" media="print" />  
</head>

<!--[if lte IE 7]>
  <style type="text/css">
    @import url(css/ie.css);
  </style>
<![endif]--> 

<body id="startseite">
<div id="umhang">
<div id="topnavi">
  <ul id="navigation">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Galerie</a></li>
    <li><a href="#">Kontakt</a></li>
    usw. usw.
  </ul>
</div><!-- Ende #topnavi-->
<div id="kopf">
  <h1>Hauptüberschrift</h1>
</div><!-- Ende #kopf-->
<div id="inhalt">
  <h2>Überschrift</h2>
  <p>Text</p>
  usw. usw.
</div><!-- Ende #kopf-->
<div id="fuss">
  <p>Hier ist der Fuss</p>
</div><!-- Ende #fuss-->
</div><!-- Ende #umhang -->
</body>
</html>
Wegen der schwarzen Blöcke habe ich etwas geraten.

In XHTML ist übrigens generelle Kleinschreibung angesagt.

Wenn ich das richtig sehe, willst du eine grafische Navigation.
Wie du sowas verwirklichst kannst du in der CSS-FAQ Punkt 15 nachlesen.

Solltest du das tun wirst du sicher erkennen, das eine schnelle CSS-Lösung für dich einfach nicht funktionieren wird, oder kannst du das dort auf Anhieb umsetzen?

Vielleicht wäre es für dich besser diese HP mit Tabellen umzusetzen, weil du dich da auskennst.
Solltest du den Ehrgeiz haben dich webdesignmäßig weiterzubilden kannst du es danach in Ruhe machen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 10.06.2009, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.06.2009
Beiträge: 5
hujuzka befindet sich auf einem aufstrebenden Ast
Standard

Wegen der schwarzen Balken, Sorry Sie wollte es so, da ihr Name dort fast überall steht bzw. Adresse etc. Habe einfach mit Paint das meiste schwarz gefärbt.

Ok das mit den Listen sieht ja in deinem Beispiel ganz logisch aus, aber um nun die ganzen Bilder dort richtig einzuordnen fehlt mir das know how und die nötige Zeit

Schade! Dann werd ich das wohl doch mit Tabellen realisieren müssen und mich danach an die CSS Variante setzen. Mich interessiert diese Technik sehr und man will ja auch mit der Zeit gehen und nicht auf seinem Stand von 19xx stehen bleiben

Vielen Dank für die Hilfe. Ich werde versuchen es mit der Liste zu lösen, klappt das nicht, werde ich es mit einer Art iFrame versuchen. Klappt das wiederum nicht wie ich es mir vorstelle, werd ich mir die Haare ausreissen und es mit Tabellen machen

Mit freundlichem Gruß
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
Seite links ausrichten like.no.other CSS 10 26.01.2011 02:10
Norwegische Webmaster gegen veraltete Browser Schelm.isch Offtopic 255 23.04.2009 22:27
Div box dem inhalt anpassen? homezonebenny CSS 1 29.11.2007 10:11
Probleme mit XHTML und CSS Design un dem IE 5.0/5.5 plubird CSS 1 19.02.2004 22:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:39 Uhr.