Problem beim Ausrichten mit CSS

x-dast

Hallo,

ich hab ein kleines Problem beim Ausrichten mit CSS Styles.
Auf dem Screenshot seht ihr einen kleinen Entwurf den ich aus SelfHTML habe. Er ist etwas umgeändert und ich habe rechts noch eine kleine Box drangehangen.
Meine Frage ist jetzt, wie bekomme ich diese kleine Box an den linken Rand der großen Box? Ich bekomm das irgendwie nicht hin.
Kann mir da einer Helfen?

Hier der Code der CSS Datei:

Code

body, p a {
    color: white; background-color: black;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }


  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0;
    background: #6699CC url(hintergrund.gif) repeat-y;
    border: 2px solid white;
  }
  html>body div#Seite {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }


  h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background: #669900 url(../../../src/logo.gif) no-repeat 100% 45%;
    border-bottom: 1px solid white;
  }


  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
	background: #669900;
	border-right: 1px dashed white;
	border-bottom: 1px dashed white;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.1em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: white; background-color: #669900;
  }
  ul#Navigation a:visited {
    color: white; background-color: #669900;
  }
  ul#Navigation a:hover {
    color: navy; background-color: #669900;
  }
  ul#Navigation a:active {
    color: navy; background-color: #669900;
  }


  div#Info {
    font-size: 0.9em;
	float: right; 
	width: 15em;
    margin: 0; padding: 0;
    border: 1px solid white; background-color: #669900;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }


  div#Inhalt {
    margin: 0 0 1em 220px;
    padding: 0 1em;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    margin-bottom: 0;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }


  p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #669900;
    border-top: 1px solid white;
  }


  p { text-align:left; margin:1em; }   /* nur fuer den 'zurueck'-Link */

Alles anzeigen

Gruß
x-dast

Elvis

Gibt es auch einen Link zu deiner Testseite?

x-dast

http://www.x-dast.de/X-DAST/HTML/xdastBeispiel.htm

Elvis

Wo soll die Werbung nun genau hin???

sejuma

Bei div#Info und div#Seite jeweils ein

Code

float:left;

setzen.

x-dast

die Werbung soll genau an den rechten Rand der großen Box.
so das der rechte Rand der großen Box und der linke Rand der kleinen Box sich berühren.

sejuma

Hab jetzt verschiedene Änderungen in der CSS (Seite, Info, Fußzeile) sowie Änderungen in der Reihenfolge der HTML vorgenommen und hoffe es kommt so in etwa hin:
CSS

Code

<style type="text/css">


body, p a {
    color: white; background-color: black;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }


  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin-left:5px;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    float:left;
    padding: 0;
    background: #6699CC url(hintergrund.gif) repeat-y;
    border: 2px solid white;
  }
  html>body div#Seite {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }


  h1 {
    font-size: 1.5em;
    margin: 0; padding: 0.3em;
    text-align: center;
    background: #669900 url(../../../src/logo.gif) no-repeat 100% 45%;
    border-bottom: 1px solid white;
  }


  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 200px;
    margin: 0 0 1.2em; padding: 0;
   background: #669900;
   border-right: 1px dashed white;
   border-bottom: 1px dashed white;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.1em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: white; background-color: #669900;
  }
  ul#Navigation a:visited {
    color: white; background-color: #669900;
  }
  ul#Navigation a:hover {
    color: navy; background-color: #669900;
  }
  ul#Navigation a:active {
    color: navy; background-color: #669900;
  }


  div#Info {
    font-size: 0.9em;
   float: left;
   width: 15em;
    margin: 0; padding: 0;
    border: 1px solid white; background-color: #669900;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }


  div#Inhalt {
    margin: 0 0 1em 220px;
    padding: 0 1em;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    margin-bottom: 0;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: navy;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }


  p#Fusszeile {
  clear:left;
  width:762px;
    float:left;
    font-size: 0.83em;
    margin-left:5px ; padding: 0.1em;    text-align: center;
    background-color: #669900;
    border-top: 1px solid white;
  }


  p { text-align:left; margin:; }   /* nur fuer den 'zurueck'-Link */
</style>

Alles anzeigen

HTML

Code

<div id="Seite">
  <h1>CSS-basierte Layouts</h1>


  <ul id="Navigation">
  	[*]<Span>Home</Span>


    [*]<h2>Über Mich</h2>
    [*][url='#Beispiel']Bilder[/url]


	[*][url='#Beispiel']News[/url]


    [*]<h2>Nightlife Dresden</h2>


    [*][url='#Beispiel']Spinnerei[/url]
    [*][url='#Beispiel']Washroom[/url]
    [*][url='#Beispiel']Blue[/url]


    [*]<h2>Kontakt</h2>
    [*][url='#Beispiel']Kontaktformular[/url]
    [*][url='#Beispiel']Fax[/url]


    [*][url='#Beispiel']Brief[/url]
  [/list]


  <div id="Inhalt">
    <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>



In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>



Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer &Auml;nderung des Schriftgrades
       nicht anpassen.</p>


    


Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschlie&szlig;enden DIV zugewiesen.
       Sowohl f&uuml;r die Navigation als auch f&uuml;r diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.


       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabh&auml;ngig von deren H&ouml;he.</p>



Der Kopf- und der Fu&szlig;zeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
  </div>


</div>   <div id="Info">
  [b]Werbung[/b]



Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
     im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.</p>


  


Dadurch, dass f&uuml;r den Inhaltsbereich kein float definiert ist, kann auf
     die Angabe einer Breite verzichtet werden und die Seite den ihr zur
     Verf&uuml;gung stehenden Raum ausnutzen.</p>



Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
     Breitenangabe verzichten zu k&ouml;nnen, hat au&szlig;erdem den Vorteil, Abweichungen
     durch das falsche Box-Modell des Internet Explorers auszugleichen.</p>
</div>    <p id="Fusszeile">letzte Aktualisierung war am:
    Dienstag, 05-Sep-2006  17:37
  </p>

Alles anzeigen

Noch ein Tipp: Du verwendest bei den Breitenangaben unterschiedliche Einheiten (px und em). Das vertragen manche Browser nicht.
Am besten alles in Pixel für feste Breiten oder in % bzw em für relative Breiten.

x-dast

wenn ich deinen Code nehme, ist das zwar so wie ich mir das vorgestellt habe, aber es verschiebt mir ein wenig die rahmen und das menü.

Die CSS datei habe ich mir aus dem Code von SelfHTML zusammengestellt und lediglich nur die Werte geändert, aber nicht die Einheit, also ist schon von anfang an px und em gemischt.

Elvis

Man sollte nach Möglichkeit mehr relative Größen (also % und em) verwenden um die Barrierefreiheit zu erhöhen und um bei unterschiedlichen Bildschirmauflösungen eine besseres Ergebnis zu erzielen.

x-dast

ich hab grad nochmal rumprobiert, aber mit dem code bekomm ich meine rahmen nicht mehr so richtig hin.
da werd ich wohl erstmal die kleine box weglassen müssen.
oder hat noch jemand einen tipp?

Elvis

Was genau möchtest du jetzt erreichen?

P.S.: Die Seite von der wir den Link haben sieht immer noch unverändert aus....

x-dast

die kleine box bleibt erstmal da wo sie ist.

ich habe jetzt allerdings eine kleine Grafik oben rechts hinzugefügt, aber im Opera ist ein kleiner freiraum, da die grafik geteilt ist. im internet explorer passt das einwandfrei.

sejuma

Die Rahmenproblematik liegt wohl daran, dass dieser nach meinem Code nun doppelt ist: Einmal der rechte Rahmen von "Seite" und einmal der linke von "Info". Wenn das stört, einfach den Linken Rahmen von Info weglassen.

Elvis

Zum nachlesen hier klicken.

x-dast

wenn ich deinen code nehme, sieht die seite dann so aus.

ich bekomm die fußzeile nicht an den inhalt dran.

und falls du vielleicht noch einen tipp hast, wie ich in Firefox und Co. die kleine grafik oben rechts richtig an den rahmen bekomme, wäre das super. im internet explorer passt das mit der grafik.

gruß
x-dast

sejuma

Nimm mal den p-Tag vom Footer vor den Info-div, dann die Rahmen ggf. noch anpassen.
Kanns mir leider erst heut Abend im FF ansehen.

Elvis

Also in Opera sieht es im Moment total zerschossen aus. Hab aber im Moment auch keine Chance dran zu basteln.

x-dast

ich habe das mal mit dem p-Tag geändert, sieht aber auch nicht viel anders aus.
im ie passt es aber so weit schon.

x-dast

also das mit opera und co. bekomm ich irgendwie nicht hin.
wenns dann mal im opera so weit ganz ok ist, passt es im ie wieder nicht.

sejuma

So, hab jetzt nochmal gearbeitet. Im FF und IE sieht's bei mir gleich aus.
Der Abstand an dem Logo ist vermutlich durch padding verursacht.

CSS

Code

body, p a {
    color: white;
	background-color: black;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0;
	padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }


  div#Seite {
  	color: white;
	background-color: #6699CC;
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin-left: 20px;     /* standardkonforme horizontale Zentrierung */
    width: 75%;
    float:left;
    padding: 0;
    border-left:2px;
     border-right:0px;
    border-top:2px;
    border-style:solid;
    border-color:#ffffff;
  }
  html>body div#Seite {
    border-color: white;  /* Farbangleichung an den Internet Explorer  */
  }


  h1 {
  	color: white;
    background: #669900 url(../IMAGES/mosoben.jpg) no-repeat 100% 100%;
    font-size: 1.5em;
    width:98.5%;
    margin: 0;
	padding: 0.3em;
    text-align: left;
    border-bottom: 1px solid white;
  }


  ul#Navigation {
  	color: white;
 	background-color: #669900;
  	float: left;
    width: 10em;
    margin: 0;
	padding: 0;
	border-bottom: 1px dashed white;
	border-right: 1px dashed white;
  }
  * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.1em;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0.4em;
	padding: 0;
  }


  ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
    display:block;
    padding: 0.1em;
    text-decoration: none;
	font-weight: bold;
    border: 1px solid black;
    border-left-color: white;
	border-top-color: white;
    color: white;
	background-color: #6699CC;
  }
  * html ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
  }
  ul#Navigation a:hover, ul#Navigation span{
    border-color: white;
    border-left-color: black;
	border-top-color: black;
    color: black;
	background-color: #6699CC;
  }
  ul#Navigation h2 {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: black;
    color: black;
	background-color: white;
  }


  div#Info {
  	color: white;
	background-color: #669900;
    font-size: 0.9em;
	float:left;
	width: 16%;
    	border-right: 2px solid white;
	border-bottom: 2px solid white;
	border-top: 2px solid white;
	border-left: 2px solid white;
  }
  div#Info strong {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }


  div#Inhalt {
  	background: url(../IMAGES/mosunten.jpg) no-repeat 100% 0%;
    margin: 0 0 1em 160px;
    padding: 0 1em;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
    margin-bottom: 0;
  }
  div#Inhalt h2 {
    color: navy;
	/*background-color: #6699CC;*/
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }


  #Fusszeile {
  	color: white;
	background-color: #669900;
	clear:both;
         width:100%;
    float: left;
    font-size: 0.83em;
    padding: 0.1em;
    text-align: right;
     border-top-color: white;
     border-top:1px;
     border-top-style:solid;


  }

Alles anzeigen

HTML (innerhalb body)

Code

<div id="Seite">
  <h1>
    <a href="http://www.validome.org/referer">
      [img]http://www.validome.org/images/set3/valid_html_4_0_1.gif[/img]</a> || willkommen
  </h1>


  <ul id="Navigation">
  	[*]<Span>Home</Span>
	[*][url='#Über Mich']Über Mich[/url]
	[*][url='#News']News[/url]
	[*][url='#Umfrage']Umfragen[/url]
    [*][url='#Nightlife Dresden']Nightlife Dresden[/url]


	[*][url='#Download']Download[/url]
    [*][url='#Kontakt']Kontakt[/url]
	[*][url='#Disclaimer']Disclaimer[/url]
  [/list]


  <div id="Inhalt">
    <h2>x-dast.de wird komplett umgebaut</h2>



Dies Seite erhält gerade ein neues Design.
Bitte hab noch ein klein wenig Gedult.</p>


  </div>


 <div id="Fusszeile">letzte Aktualisierung war am:
    Mittwoch, 06-Sep-2006  13:25</div>
</div>


<div id="Info">
  [b]Werbung[/b]



Auch wenn diese Info- Box am Bildschirm als letzte angezeigt wird, ist sie
     im Quelltext vor dem im Fluss belassenen Inhaltsbereich zu notieren.</p>


  


Dadurch, dass für den Inhaltsbereich kein float definiert ist, kann auf
     die Angabe einer Breite verzichtet werden und die Seite den ihr zur
     Verfügung stehenden Raum ausnutzen.</p>



Diese Methode, ein Element im Fluss zu belassen und dadurch auf eine
     Breitenangabe verzichten zu können, hat außerdem den Vorteil, Abweichungen
     durch das falsche Box-Modell des Internet Explorers auszugleichen.</p>


</div>

Alles anzeigen

Problem beim Ausrichten mit CSS

Tags

Benutzer online in diesem Thema