zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Habe ein Problem mit einer Breitenangabe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.10.2008, 09:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Frage Habe ein Problem mit einer Breitenangabe

Hallo und schönen Vormittag zusammen!

Ich will gar nicht lange drum rum quatschen - ich habe ein Problem mit folgendem CSS Layout:

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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header">
    <div id="logo">Logo</div>
    <div id="extranav">
      <div id="contact">Kontakt</div>
      <div id="language">
        <ul>
          <li><a href="#">Deutsch</a></li>
          <li><a href="#">English</a></li>
        </ul>
      </div>
      <div id="login">Login</div>
    </div>
    <div id="mainnav">
      <ul>
        <li><a href="#">Main01</a></li>
        <li><a href="#">Main02</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
Hier das CSS dazu
Code:
* {
	margin: 0px;
	padding: 0px;
}

html {
	font-size: 100%;
}

body {
	font: 0.689em Verdana, Arial, Helvetica, sans-serif;
	background: #CCCCCC;
	background-image: url(site-bg.gif);
	color: #000000;
}

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.2em;
}

/* ID's */
#container {
	position: relative;
	width: 900px;
	/* -- centers the container element */
	margin-left: auto;
	margin-right: auto;
	color: #000000;
}

#blackborder {
	background: transparent;
	color: #000000;
	border: 1px #666666 solid;
}

#header {
	position: relative;
	height: 116px;
	background: #FFFFFF;
	color: #000000;
}

#logo {
	float: left;
	width: 210px;
	height: 116px;
	background: #0000FF;
	background-image: url(logo.gif);
	color: #FFFFFF;
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- main navigation on top */
#mainnav {
	font-weight: bold;
	position: absolute;
	left: 229px;
	bottom: 29px;
	margin: 0px;
	padding: 0px;
}

#mainnav ul {
	list-style-type: none;
}

#mainnav li {
	display: inline;
}

#mainnav a {
	padding: 0 4px;
}

#mainnav a:link, #mainnav a:visited {
	color: #69696b;
	text-decoration: none;
}

#mainnav a:hover {
	color: #00763b;
}

#mainnav li.pressed {
	color: #00763b;
	padding: 0 5px;
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- extra navigation on top */
#extranav {
	display: block;
	overflow: hidden;
	color: #000000;
}

#extranav ul {
	list-style-type: none;
}

#extranav li {
	display: inline;
}

#extranav a {
	padding: 0 4px;
}

#extranav a:link, #extranav a:visited {
	color: #69696b;
	text-decoration: none;
}

#extranav a:hover {
	color: #00763b;
}

#extranav li.pressed {
	color: #00763b;
	padding: 0 5px;
}

#contact {
	float: left;
	padding: 10px;
	background: #FF6600;
}

#language {
	float: right;
	padding: 10px;
	background: #00FFFF;
	color: #FFFFFF;
}

#login {
	padding: 10px;
	color: #000000;
}
Leider schaffe ich es nicht, dass die 3 Spalten "Language", "Contact" und "Login" nicht nur so breit sind, wie's wirklich nötig ist. Die 3 Spalten werden immer über die ganze Breite von "Header" gezogen?!

Irgend welche Ideen?
Wäre euch sehr dankbar!

atmosfear

Geändert von atmosfear (08.10.2008 um 10:13 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.10.2008, 09:34
Benutzerbild von In4matiker
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2005
Ort: Winterthur (Schweiz)
Beiträge: 158
In4matiker befindet sich auf einem aufstrebenden Ast
Standard

in welchem Browser?
Im IE7 und FF3 stimmts - die 3 DIV sind genauso breit wie der Inhalt (also nicht die ganze Header Breite - wobei welche Header Breite - der hat ja gar Keine).
Die Aufteilung wirkt ein wenig seltsam - aber naja gut - bist ja noch nicht fertig.
Vielleicht wäre es einfacher wenn Du auf einer Zeichnung aufzeigen könntest wie es aussehen soll.

Geändert von In4matiker (08.10.2008 um 09:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.10.2008, 09:40
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Danke für die schnelle Antwort!
Also wenn ich die Seite im Firefox 3.0.3 betrachte, dann habe ich das Problem, dass der Language Bereich schön rechtsbündig ist, Kontakt aber links plaziert ist, und die Login-Spalte extrem breit wird (also den Rest einnimmt)
Alle 3 Spalten sollten aber rechtsbündig ausgerichtet sein, und nur so breit sein, wie auch der Inhalt ist...

Ich glaube du hast mich falsch verstanden!?
Warum ist die Aufteilung seltsam, das würd mich interessieren - man kann immer was dazu lernen!

EDIT:
Die Breite kommt vom Container, nicht vom Header, sorry...

DANKE
atmosfear
Mit Zitat antworten
  #4 (permalink)  
Alt 08.10.2008, 09:57
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Bitte stell lauffähigen Code ein, oder besser noch einen Link zu deinem Problemfall (siehe Hinweise für Fragende).

Warum positionierst du die Navigation absolut?
Wozu brauchst du so viele Divs? Sie haben keine semantische Bedeutung und sollten nur eingesetzt werden wo es wirklich Sinn macht.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.10.2008, 10:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Erstens: Warum sollte der Code nicht lauffähig sein? Ok ich habe die html und body Tags nicht reinkopiert, aber jetzt auch gleich geändert.

Zweitens: Kannst du mir einen Tip geben, wie ich mit weniger divs auskomme? Ich brauche verschiedene Bereiche auf meiner Seite, die ich dann später mittels eines CMS ansprechen kann. Darum die divs, denke ich...

Drittens: Die Navigation muss an einer bestimmten Stelle stehen um dann später in die Headergrafik reinzupassen. Ich wüsste nicht, wie ich es ohne absolute Positionierung hinbringen sollte!?

DANKE!
atmosfear
Mit Zitat antworten
  #6 (permalink)  
Alt 08.10.2008, 10:23
Benutzerbild von In4matiker
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2005
Ort: Winterthur (Schweiz)
Beiträge: 158
In4matiker befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Vielleicht wäre es einfacher wenn Du auf einer Zeichnung aufzeigen könntest wie es aussehen soll.
Das würde helfen Dich besser zu verstehen.
Also eine richtige Skizze - nicht Text Beschreibungen.
Dann können wir Dir auch eher sagen wie Du es aufbauen kannst.

Wenn Du beim #login ein float:left reinmachst dann bekommt er die Grösse des Inhalts.

Geändert von In4matiker (08.10.2008 um 10:28 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.10.2008, 10:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Alles klar, hier die gewünschte Grafik:



Gruß
atmosfear
Mit Zitat antworten
  #8 (permalink)  
Alt 08.10.2008, 11:13
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von atmosfear Beitrag anzeigen
Erstens: Warum sollte der Code nicht lauffähig sein? Ok ich habe die html und body Tags nicht reinkopiert, aber jetzt auch gleich geändert.
Du hast es erfasst, lauffähig heißt, dass es per Copy&Paste funktionieren muss - ohne Bastelei.
Ich persönlich halte es immer noch für einen zu hohen Aufwand und schau mir deshalb nur Links an, aber evtl. reicht der Code anderen Helfern schon.

Zitat:
Zitat von atmosfear Beitrag anzeigen
Zweitens: Kannst du mir einen Tip geben, wie ich mit weniger divs auskomme? Ich brauche verschiedene Bereiche auf meiner Seite, die ich dann später mittels eines CMS ansprechen kann. Darum die divs, denke ich...
Die Divs um die Listen sind überflüssig, die Id kannst du der ul direkt geben. Falls du die Reihenfolge im Code ändern kannst/willst, kannst du dir auch #extranav sparen. #logo würde ich eher in eine h1 packen. #contact und #login sind Links?

Zitat:
Zitat von atmosfear Beitrag anzeigen
Drittens: Die Navigation muss an einer bestimmten Stelle stehen um dann später in die Headergrafik reinzupassen. Ich wüsste nicht, wie ich es ohne absolute Positionierung hinbringen sollte!?
Da reichen entsprechend Abstände aus.

Geändert von inta (08.10.2008 um 11:16 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 08.10.2008, 11:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Standard

Hallo nochmal,

also gut, soweit bin ich, ich weiss allerdings immer noch nicht, wie ich die Breite der 3 Spalten oben einschränken kann!?
Also die Breite der einzelnen Spalten passt schon, aber bekomme ich "Login" und "Kontakt" nach rechts?

@inta
Habe die absolute Positionierung nun rausgenommen und durch margins ersetzt. Klappt perfekt - hattest Recht...



Hier noch der aktuelle Code
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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="uploads/tf/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header">
    <div id="logo">Logo</div>
    <div id="extranav">
      <div id="contact">
        <ul>
          <li><a href="#">Kontakt</a></li>
        </ul>
      </div>
      <div id="language">
        <ul>
          <li><a href="#">Deutsch</a></li>
          <li><a href="#">English</a></li>
        </ul>
      </div>
      <div id="login">
        <ul>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </div>
    <div id="mainnav">
      <ul>
        <li><a href="#">Main01</a></li>
        <li><a href="#">Main02</a></li>
      </ul>
    </div>
  </div>
</body>
</html>
Und das Stylesheet
Code:
/*
* {
	margin: 0px;
	padding: 0px;
}

html {
	font-size: 100%;
}

body {
	font: 0.689em Verdana, Arial, Helvetica, sans-serif;
	background: #CCCCCC;
	background-image: url(site-bg.gif);
	color: #000000;
}

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.2em;
}

/* ID's */
#container {
	position: relative;
	width: 900px;
	/* -- centers the container element */
	margin-left: auto;
	margin-right: auto;
	color: #000000;
}

#header {
	position: relative;
	height: 116px;
	background: #FFFFFF;
	color: #000000;
}

#logo {
	float: left;
	width: 210px;
	height: 116px;
	background: #0000FF;
	background-image: url(logo.gif);
	color: #FFFFFF;
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- main navigation on top */
#mainnav {
	font-weight: bold;
	margin-top: 39px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 229px;
	padding: 0px;
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- extra navigation on top */
#extranav {
	display: block;
	overflow: hidden;
	color: #000000;
	background-color: #9999FF;
}

#contact {
	float: left;
	padding: 10px;
	background: #FF6600;
}

#language {
	float: right;
	padding: 10px;
	background: #00FFFF;
	color: #FFFFFF;
}

#login {
	float: left;
	padding: 10px;
	color: #000000;
	background: #FFFF00;
}

/* ------------------------------------------------------------------------------------------------------- */
#imagepic_start {
	width: 900px;
	height: 294px;
	background-image: url(image_start.jpg);
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- main container (main navigation, content & news block) */
#main {
	clear: both;
	display: block;
	overflow: hidden;
	margin-top: 6px;
	border-top: 2px #D5D5D5 solid;
	background-color: #FFFFFF;
	color: #000000;
}

#left {
	float: left;
	width: 161px;	 /* actually 209 (149 + 2 * padding) */
	margin-top: 20px;
	padding: 10px 24px;
	border-right: 1px #D5D5D5 solid;
	color: #69696b;
	font-weight: bold;
}

#content {
	margin: 0 0 0 209px;
	padding: 30px 24px;
	color: #69696b;
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- footer */
#footer {
	clear: both;
	margin-top: 6px;
	border-top: 2px #D5D5D5 solid;
	margin-bottom: 10px;
	padding: 10px;
	text-align: right;
	background-color: #FFFFFF;
}

/* ------------------------------------------------------------------------------------------------------- */
/* --- lists and links */
#mainnav ul, #left ul {
	list-style-type: none;
}

#mainnav li {
	display: inline;
}

#left li {
	display: block;
}

#mainnav a, #left a {
	padding: 0 4px;
}

#mainnav a:link, #mainnav a:visited, #left a:link, #left a:visited {
	color: #69696b;
	text-decoration: none;
}

#mainnav a:hover, #left a:hover {
	color: #00763b;
}

#mainnav li.pressed, #left li.pressed {
	color: #00763b;
	padding: 0 5px;
}

/* ------------------------------------------------------*/
#footer ul, #extranav ul, {
	list-style-type: none;
}

#footer li, #extranav li {
	display: inline;
}

#footer a, #extranav a {
	padding: 0 4px;
}

#footer a:link, #mainnav a:visited, #extranav a:link, #extranav a:visited {
	color: #69696b;
	text-decoration: underline;
}

#footer a:hover, #extranav a:hover {
	color: #00763b;
}

#footer li.pressed, #extranav li.pressed {
	color: #00763b;
	padding: 0 5px;
}
DANKE
atmosfear

Geändert von atmosfear (08.10.2008 um 11:26 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.10.2008, 11:41
Benutzerbild von In4matiker
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2005
Ort: Winterthur (Schweiz)
Beiträge: 158
In4matiker befindet sich auf einem aufstrebenden Ast
Standard

Wiso machst Du immer noch ein DIV um das contact, language, login und mainnav?
Das geht auch ohne - direkt in das ul die ID reinmachen.
Und wenn Du sowiso nur 1 Link hast (z.B. Kontakt) dann kannst Du auch direkt das a nehmen und brauchst die Liste nicht (Liste = nur bei mehreren Links).
Die Liste ist z.B. sinnvoll bei den Sprachen (da kannst ja u.U. auch noch mehr geben als nur die 2 jetzt).

Geändert von In4matiker (08.10.2008 um 11:44 Uhr)
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
Navi problem unter ie6 .kewin CSS 3 20.11.2007 15:47
Design zu CSS/HTML verarbeiten - Problem häufen sich. Grafikamateur CSS 2 06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload Maxefix Serveradministration und serverseitige Scripte 0 19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 17:39
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 06:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:21 Uhr.