zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ps design (slices), php (dynamischer inhalt), css gestaltung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 16.05.2006, 11:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Wie immer gilt als erstes: Validieren:

http://validator.w3.org/check?verbos...um%2Findex.php

Dann wäre ein gut strukturiertes HTML sinnvoll. Insbesondere sollten sinnvolle Elemente (h1, h2, p, ol, etc.) eingesetzt werden. Außerdem solltest Du Dir in einer CSS-Referenz den Abschnitt über Selektoren durchlesen, denn es ist nicht nötig allen Elementen eine Klasse (oder in deinem Fall fälschlicherweise dieselbe ID) geben.

Beispielsweise:

Code:
<div id='wrapper'>
	<h1>[img]graphics/index_02.gif[/img]</h1>
	
  1. home
  2. about us
  3. ...
<div id='content'></div> <div id='submenu'></div> <div id='footer'></div> </div>
Jetz dazu:
Zitat:
das mit dem Rahmen rechts klappt nicht so ganz... weil der Rahmen ja nicht ganz außen ist sondern ca. 12px nach innen verschoben ist...
Du hast ja "menu", "content" und "submenu" einfach nebeneinander gefloatet. Wenn es in der Breite nicht aufgeht, hast du dich irgendwo in den Breiten, Paddings, Margins, etc. verrechnet. Dazu zwei Vorschläge:
a) Lies dir was zum "CSS-Box-Modell" durch, das erklärt Dir wir "width", "padding", etc. zusammenhängen.
b) Überlege Dir grundsätzlich, ob du alles pixelgenau machen wilst. Gerade wenn du von einer zerschnittenen Grafik als Basis kommst ist es schwierig vorzustellen, aber HTML/CSS funktioniert besser, wenn du Layouts auf Prozente (also flexibel abhängig von der Fenstergröße) oder in EM (flexibel abhängig von der Schriftgröße) erstellst.

Eine alternative alles links zu Floaten wäre beispielsweise: "menu" links zu floaten, "submenu" rechts zu floaten und dann "content" garnicht zu floaten, sondern Margins links und rechts zu geben, die jeweils so Breit sind wie "menu" und "submenu" plus etwas extra als Abstand .

Robin
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 16.05.2006, 23:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

danke für den Hinweis mit der xhtml Überprüfung..

mein zweites Problem hast du aber nicht verstanden... die Abstände sind alle schon richtig berechnet. Die Seite soll nur flexibel in der Höhe sein.. in der Breite bleibt sie immer bei 800px...

mein hauptproblem liegt sicherlich in der zweiten box unten links... wie bekomm ich die dahin (dynamisch in der höhe!!)... und das problem was ich mit dem rahmen angesprochen habe ist folgendes... guck dir meine beispielgrafik an, wie es aussehen soll und dann guck dir andirs vorletzten Beitrag an.. das funktioniert mit der rechten seite nicht, weil der Rahmen den ich haben will ca. 12px weiter links von dem Rahmen verläuft, den ich mit seiner Methode bekommen würde.

Danke für die Hilfe...falls jemand noch Ideen hat, immer her damit... ansonsten muss ich vielleicht einsehen, dass es sich nicht umsetzen lässt.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 19.05.2006, 23:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

*up*
Mit Zitat antworten
  #14 (permalink)  
Alt 20.05.2006, 00:54
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von schleepy
*up*
Sind wir hier in einem Marktplatz?
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #15 (permalink)  
Alt 21.05.2006, 20:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

nein.. aber wenn mein Thema irgendwo auf der zweiten Seite verschwindet kann ich wahrscheinlich lange auf ne Antwort warten.
Mit Zitat antworten
  #16 (permalink)  
Alt 21.05.2006, 21:08
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ich dachte, das wäre klar.
Dennoch, here you go:

EDIT:Noch mal ein bisschen mehr der grafik angepasst.
Ich hab zwei Bilder gebastelt, die das Vorgehen verdeutlichen.
Die Headergrafik in einem Stück und einen kleinen teil, der nach unten überlappt. Selber basteln

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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dreispalter</title>
<style type="text/css">
<!--

* {
margin: 0;
padding: 0;
}


body {
text-align: center;
/* fuer aeltere IE */
}

#wrapper, #wrapagain {
text-align: left;
width: 804px;
margin: auto;
}

#wrapagain {
width: 802px;
border-right: 2px solid black;
border-top: 1px solid black;
}

#header {
margin-top: 20px;
height: 100px;
border: 1px 0px 0px 0px solid black;
background: url(schleepy1.gif) top left no-repeat;
position: relative;
}

#header img {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: -3px;
}

#wrapmenue {
float: left;
width: 162px;
background: #fff;
color: black;
}
#hauptmenue, #subhaupt {
margin-top: 30px;
border: 1px solid black;
width: 158px;
height: 120px;
background-color: #bfd4fb;
color: black;
height: 250px;
}

#subhaupt {
margin-top: 12px;
height: auto;
}

#content {
float: left;
display: inline;
width: 448px;
border: 1px solid black;
background-color: #bfd4fb;
color: black;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 30px;
}

#submenu {
float: left;
display: inline;
width: 158px;
border: 1px solid black;
background-color: #bfd4fb;
color: black;
margin-top: 30px;
height: 250px;
}
#footer {
clear: left;
height: 20px;
border: 1px solid black;
background-color: #bfd4fb;
border-right: 0;
}

//-->
</style>
</head>
<body>
<div id="wrapper"><div id="header">[img]schleepy2.gif[/img]</div><div id="wrapagain"><div id="wrapmenue"><div id="hauptmenue">

hauptmenue

bla

bla
</p></div><div id="subhaupt">zweites links unten





und so weiter</div></div><div id="content">

 Am cleartype in IE7/ beta gefällt mir gar nix. Schriften sehen darin  so verwaschen aus wie sie vorher gepixelt haben ( manchmal) Dafür ist das Ding mit den vergrösserten Grafiken ziemlich gut, wenn auch nicht auf jeder Stufe 


 Immerhin stellt microsoft so ein Tuningtool zur Verfügung. mit der man sich das genehme Aussehen der Schriftenglättung einigermassen einstellen kann. Dann ist die Kantenglättung brauchbar, obgleich FF und Opera trotzdem schöner rendern.
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</p></div><div id="submenu">

submenu</p>

bla

bla</p></div><div id="footer">

footer</p></div></div></div>

</body>
</html>
grüsse
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #17 (permalink)  
Alt 26.05.2006, 00:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

hey.. vielen Dank andir...

es ist nicht ganz so geworden, wie ich es haben wollte.. aber mit dem Ergebnis bin ich sehr zufrieden. Ich hätte es nicht 100%ig umsetzen können und mit 99% geb ich mich dann gern zufrieden Nochmals, gute Arbeit andir und der Rest natürlich auch

ein Problem hab ich allerdings noch.. ich denke es handelt sich evtl. um die "seltsamen Lücken" http://www.carsten-protsch.de/zwisch...e/luecken.html oder http://www.dodabo.de/html+css/img-table/

mit Firefox läuft selbstverständlich alles perfekt

Also das Problem beim IE ist, dass der rechte Rand nen pixel zu weit rechts ist.. außerdem stimmt da was mit den abmessungen der drei spalten nicht.. im FF passt alles wunderbar nebeneinander aber im IE ist das alles zu weit, sodass er die rechte spalte unter die anderen verschiebt (weil nicht mehr genügend platz vorhanden ist)

ich hab den Code mal gekürzt.. ich hoffe ich hab den Fehler nicht mit weggekürzt.

hier zum gucken!

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Northwest Philadelphia Interfaith Hospitality Network (NPIHN)</title>
 <style type="text/css"> 
* {
	margin:0;
    padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
}

body {
text-align: center;
/* fuer aeltere IE */
}

img {
	border: 0pt;
	vertical-align:top;
}

a:link, a.menulink:link, a.footerlink:link, a:visited, a.menulink:visited, a.footerlink:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #366DBE;
	background-color:transparent;
}
a:hover, a.menulink:hover, a.footerlink:hover, a:active, a.menulink:active, a.footerlink:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #214273;
	background-color:transparent;
}
a.menulink:link, a.menulink:visited, a.menulink:hover, a.menulink:active{
	font-size: 14px;
}
a.footerlink:link, a.footerlink:visited, a.footerlink:hover, a.footerlink:active {
	font-size:9px;
}

#wrapper, #wrapagain {
text-align: left;
width: 800px;
margin: auto;
}

#wrapagain {
width: 798px;
border-right: 2px solid black;
display: block;
}

#header {
position: relative;
background-image: url('graphics/header.gif');
height: 108px;
}

#wrapmenu {
float: left;
width: 122px;
background: #fff;
color: black;
}
#hauptmenu, #submain {
margin-top: 20px;
border: 2px solid black;
width: 122px;
height: auto;
background-color: #CFDCF1;
color: black;
}

#submain {
margin-top: 12px;
}

#content {
	float: left;
	border: 2px solid black;
	display: inline;
	width: 512px;
	height: auto;
	min-height: 412px;
	margin-left: 13px;
	margin-top: 20px;
	margin-right: 11px;
	margin-bottom: 12px;
	background-color: #CFDCF1;
	background-image: url('graphics/heart.png');
	background-repeat: no-repeat;
}
#submenu {
float: left;
display: inline;
width: 122px;
border: 2px solid black;
background-color: #CFDCF1;
color: black;
margin-top: 20px;
margin-bottom: 12px;
}

#footer {
clear: left;
border: 2px solid black;
width: 796px;
height: 12px;
background-image: url('graphics/footer.png');
}

div.contentbox {
	border: 2px solid black;
	height: auto;
	margin: 17px;
	color: black;
	background-color: #EBF1FA;
}
.footerformat {
	text-align: center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;	
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="header">
	</div>
	<div id="wrapagain">
		<p style="text-align:center;">
			<?php
				 echo "
<span style='text-decoration: blink; font-weight:bold;'>keep up-to-date about NPIHN</span><span style='font-weight:bold;'> -></span>[img]graphics/feedicon.gif[/img]";
			 ?>
		</p>
		<div id="wrapmenu">
			<div id="hauptmenu">
				<?php include('menu.inc.php'); ?>
			</div>
			<div id="submain">
				<?php include('login.inc.php'); ?>
			</div>
		</div>
		<div id="content">
			<?php include('content.inc.php'); ?>
		</div>
		<div id="submenu">
			<?php include("shoutbox.inc.php"); ?>
		</div>
		<div id="footer">
			<p class='footerformat'>&copy; 2006 - www.philashelter.org</p>
		</div>
	</div>
</div>

</body>
</html>
Mit Zitat antworten
  #18 (permalink)  
Alt 31.05.2006, 00:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

keiner ne idee, woran es liegen könnte?
Mit Zitat antworten
  #19 (permalink)  
Alt 31.05.2006, 10:30
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Überprüfe erstmal bei submenu ob es die richtige Breite hat, bei mir rutscht es im IE nach unten, da wohl der Platz fehlt ( Breite)

Browsercache leeren und mal anschauen.

Was die obere Grafik angeht würde ich die Schriften rausnehmen und über die Grafik platzieren. So siehts einfach nur gepixelt aus und das nicht schön.

grüsse
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 02.06.2006, 23:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

jop..

ich hab's jetzt anders gelöst... hab für IE und FF verschiedene Maße genommen...

Code:
<!--[if gte IE 5]>
 <style type="text/css">
 </style>
<![endif]-->
hab die styles überschrieben... und jetzt funzt es

aber das mit der pixeligen Schrift ist ne gute Idee..thx
soweit bin ich dann erst einmal glücklich... für Verbesserungsvorschläge bin ich immer zu haben!!
Mit Zitat antworten
Sponsored Links
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
Inspiration - Sammlung von Links emti Ressourcen 8 01.12.2009 19:02
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
CSS Problem Design auf anderen Rechnern verschoben MALPI CSS 3 09.10.2008 11:51
Redundanter Inhalt durch CSS -> PHP? smartens CSS 11 04.07.2007 19:18
CSS Design Probleme Hawklan CSS 5 12.08.2004 12:45


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