zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden html layout in css

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.12.2005, 21:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2005
Beiträge: 15
bartenbach befindet sich auf einem aufstrebenden Ast
Standard html layout in css

hi, leute
wage mich an mein erstes css projekt und steh schon an.
ich möchte dieses layout http://www.wiggi-rafting.at/test/htmltest.htm
in css hinbekommen. das hab ich in css http://www.wiggi-rafting.at/test/csstest.htm leider stellte sich heraus das es sehr schwierig zu schein scheint den hier bezeichneten "test link" oben beim nicht so hohen bild hinzubekommen. kennt jemand eine Lösung?

thx bartenbach
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.12.2005, 21:53
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Nabend Bartenbach

Einige Kleinigkeiten vorweg:
1. xml-Prolog zu Beginn ist zwar eigentlich korrekt, lässt den IE jedoch im Quirksmode rendern und somit versteht er das sogenante "Boxmodell" falsch. (die 3 fettgedruckten Begriffe werden in Google gut erklärt )

2. du hast in CSS die ID "Seite" definiert und unten dann dem Container die ID "seite" zugewiesen. Da musst du auf Groß- und Kleinschreibung achten

3. Stylesheets müssten im <head>-Tag definiert werden und nicht zwischen head-Tag und und bodytag

Hab dir mal n kleines Beispiel geschrieben, wie du das machen könntest mit dem Text und den Bilder.
Ich weiß jetzt nicht so genau, ob das von der Semantik her das Optimum ist, aber für den Anfang doch ganz passabel

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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" >
* {
	margin:0;
	padding:0
	}

body {
	color: black;
	font: 12px Verdana,Arial,sans-serif;
	padding: 1em 0;
	text-align: center;
	background:    blue url(teile/bg.gif);
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 700px;
    background: #fff url(teile/boarders.gif) repeat-y;
  }
div#headerpics1 {
  background: url(teile/raft_v.jpg) right top no-repeat;
  min-height: 230px;
  }

div#headerpix2 {margin:0 auto;}
</style>
</head>
<body>
<div id="Seite">
<div id="headerpics1" >
	

[img]teile/raft_h.jpg[/img]</p>
	

test Link</p>

	</div>
</div>
</body>
</html>
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.12.2005, 23:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2005
Beiträge: 15
bartenbach befindet sich auf einem aufstrebenden Ast
Standard

ui ui.. hab ja mehr fehler als zeilen
daanke!!
Mit Zitat antworten
  #4 (permalink)  
Alt 04.12.2005, 23:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2005
Beiträge: 15
bartenbach befindet sich auf einem aufstrebenden Ast
Standard

danke nochmal, hab aber noch eine frage
also das rechte bild machst du als hintergrundbild damit es sich so ausrichten lasst.
die bilder sollen sich dann aber bei jeder seite wechseln lassen, und da ich das css auslagern möchte kann ich die lösung nicht ganz verwenden.
sorry das ich so lästig bin - wär cool wenn du noch ne lösungsmöglichkeit wissen würdest.
thx bartenbach
Mit Zitat antworten
  #5 (permalink)  
Alt 05.12.2005, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.12.2005
Beiträge: 15
bartenbach befindet sich auf einem aufstrebenden Ast
Standard

lässt sich also nicht mit css hinbekommen? muss wohl doch auf tabellen zurückgreifen?
Mit Zitat antworten
  #6 (permalink)  
Alt 05.12.2005, 10:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von bartenbach
die bilder sollen sich dann aber bei jeder seite wechseln lassen, und da ich das css auslagern möchte kann ich die lösung nicht ganz verwenden.
Gib dem body-Element jeweils ein unterschiedliche ID und weise über den Nachfahrenselektor unterschiedliche Hintergrundbilder zu.
#version1 #headerpics1 {...}
#version2 #headerpics1 {...}

Zitat:
lässt sich also nicht mit css hinbekommen? muss wohl doch auf tabellen zurückgreifen?
Was hat das mit Tabellen zu tun?
Willst du hier fertige Lösungen präsentiert bekommen ohne selbst etwas zu tun?

Für dich zur Einarbeitung in CSS:
http://www.css4you.de/
http://de.selfhtml.org/css/index.htm
http://www.vorsprungdurchwebstandard...trocoding.html
http://www.vorsprungdurchwebstandard...scher-code.php

Grüße
fricca
Mit Zitat antworten
  #7 (permalink)  
Alt 05.12.2005, 11:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von bartenbach
also das rechte bild machst du als hintergrundbild damit es sich so ausrichten lasst.
die bilder sollen sich dann aber bei jeder seite wechseln lassen
Auf einer meiner Seiten wechselt auch mehrmals die Hintergrundgrafik des Headers, ich gebe Dir dazu mal ein vereinfachtes Code-Beispiel:
Code:
<div id="header" class="img1"><h1>Überschrift</h1>
</div>
Wenn jetzt eine andere Headergrafik kommen soll, steht im HTML-Code statt img1 einfach img2 oder img3 etc.

Und in der CSS-Datei steht dann:
Code:
#header {
height: 200px; }

.img1 {
background: url(img/header1.jpg) no-repeat; }

.img2 {
background: url(img/header2.jpg) no-repeat; }

etc.
EDIT: zu langsam Und:

Zitat:
Zitat von fricca
Zitat:
lässt sich also nicht mit css hinbekommen? muss wohl doch auf tabellen zurückgreifen?
Was hat das mit Tabellen zu tun?
Das habe ich mich auch gefragt

Schöne Grüße,
Heiko
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
externe CSS Datei in HTML einbinden simsam CSS 5 15.03.2010 21:19
css layout problem fz21z CSS 0 30.01.2008 23:41
usemap splitten unter css UND html thadan CSS 1 06.01.2008 18:30
XML -> HTML mit CSS, erweiterbares layout tk CSS 0 29.11.2004 09:41
CSS = Bug? : Einfaches Layout nicht möglich? trequ CSS 16 14.09.2004 18:06


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