zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden frage zur umsetzung (siehe anhang)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.04.2009, 02:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2008
Beiträge: 4
mmiethe79 befindet sich auf einem aufstrebenden Ast
Standard frage zur umsetzung (siehe anhang)

Hallo zusammen,

im Anhang an diesen Post ist ein Screenshot von einem Model welches ich per CSS/XHTML umzusetzen versuche. Im Moment weis ich nicht genau wie und hoffe das mir von euch jemand helfen kann.

Ich schreibe mal was mir durch den Kopf geht:

Dadurch das die Koepfe ueber den Rahmen rausragen kann ich mir nur vorstellen die Grafik als Hintergrundbild zu machen.

Meine Seitenbreite ist fest, es waere jedoch toll wenn beim zoomen der Textgroesse im Browser die Boxen nach unten mitwachsen. Mit einer Hintergrundgrafik wuerde das ja nicht funktionieren?!

Wenn ich die Koepfe einfach innerhalb der Boxen lasse koennte ich flexible Boxen erstellen die nach unten mitwachsen?!

Achja, der Text in den Boxen kann ruhig rechtsbuendig sein.

Vielen Dank im vorraus.
Martin
Angehängte Grafiken
Dateityp: jpg kaesten.jpg (10,4 KB, 45x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.04.2009, 11:55
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Nur als Idee:

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=ISO-8859-1" />
		
		<title>[ untitled ]</title>
		
		<style type="text/css">
			
			.box { margin-top: 15px; float: left; width: 33%; border: 1px solid #000; }
			.box:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0; }
			* html .box { height: 1%; }
			.img { margin: -10px 10px 0 10px; float: left; width: 50px; height: 60px; background: #FFF; border: 1px solid #000; }
			* html .img { position: relative; }
			
		</style>
		
	</head>

	
	<body>
		
		<div class="box">
			<div class="img"></div>
			text text text text text text text text text text 
		</div>
		
		<div class="box">
			<div class="img"></div>
			text text text text text text text text text text 
		</div>
		
		<div class="box">
			<div class="img"></div>
			text text text text text text text text text text 
		</div>
		
	</body>
	
</html>
Die IE-Hacks natürlich per CC einbinden.

Bei mir läuft es so in FF3 und IE6.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.04.2009, 12:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

HTML-Code:
		<div class="box">
			<div class="img"></div>
			text text text text text text text text text text 
		</div>
Sollte man wohl besser so lösen:

HTML-Code:
		<div class="box">
			<img src="..." alt="Bild" />
			<p>text text text text</p> 
		</div>
Da das <img> eigentlich zum Layout gehört, sollte es auch ins CSS als Hintergrund, wie du es auch schon vorgeschlagen hast. Dazu könnte man sogar sowas machen
HTML-Code:
		<div class="box">
			<p>text text text text</p> 
		</div>
und dem <p> dann den Hintergrund geben. Das Bild dann über den Border gehen zu lassen wird wohl noch etwas Fummelei. Ich könnte mir relative Positionierung für <p> vorstellen mit einem z-Index. Aber da musst du wohl etwas probieren.

Man könnte sogar darüber diskutieren, ob die 3 einzelnen "Einträge"/"Boxen" (oder wie man das nennt) nicht lieber in eine <ul> gesteckt werden sollten. Kannst ja mal darüber nachdenken.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.04.2009, 13:26
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Es ging mir hierbei nur um die Idee eine Box links floaten zu lassen und mit negativen margin-top zu versehen, damit diese herausragt, dass das semantisch nicht toll war, ist mir klar, aber es ging ja auch nur um die Idee.

Aber schön, hier eine sematisch korrekte Lösung:

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=ISO-8859-1" />
		
		<title>[ untitled ]</title>
		
		<style type="text/css">
			
			.box {
				float: left; 
				width: 33%; 
				border: 1px solid #000;
			}
			.box p {
				margin: 0;
				margin-top: -10px;
				padding-top: 10px;
				padding-left: 70px;
				min-height: 40px;
				background: url('portrait.png') no-repeat 10px 0;
			}
			
			* html .box p { position: relative; height: 40px; }
			
		</style>
		
	</head>

	
	<body>
		
		<div class="box">
			<p>
				text text text text text text text text text text
				text text text text text text text text text text
			</p>
		</div>
		
		<div class="box">
			<p>text text text text text text text text text text</p>
		</div>
		
		<div class="box">
			<p>text text text text text text text text text text</p>
		</div>
		
	</body>
	
</html>
Natürlich müssen die Border für die divs noch schöner gestaltet werden, das ist hier nur ein Beispiel.

Noch zur Info: Mein Beispiel-Portrait-Bild hat hier die Ausmaße 50x50, das müsste also entsprechend angepasst werden.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.04.2009, 16:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2008
Beiträge: 4
mmiethe79 befindet sich auf einem aufstrebenden Ast
Standard

Mantiz & Regloh, vielen Dank fuer eure Hilfe.
Sehr, sehr hilfreich

Ich denke ich werde das img jedoch im MarkUp lassen da die Bilder (Portraits) spaeter evtl. aus dem CMS kommen.

Gruss
Martin
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
dringende Frage zu Navi (ul) Umsetzung zombZ CSS 10 29.01.2010 02:21
Frage zur Technik bzw. Umsetzung uspri Offtopic 9 30.10.2009 10:26
Frage zur Umsetzung meines Layouts? Geht das überhaupt was ich möchte? Delysid-25 CSS 4 18.03.2009 09:07
Frage zur Umsetzung einer Tab-Navigation alopias CSS 4 22.08.2008 17:02
Navigation: frage zur umsetzung snazz (X)HTML 9 02.01.2008 02:55


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:25 Uhr.