CSS Problem - Link rechtsbündig ausrichten

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_problem_link_rechtsbuendig_ausrichten_218072/page_1 - zur Vollversion wechseln!

p1perAT schrieb am 08.08.2010 um 19:04

Hallo!

Ich bin grad dabei mich etwas in (X)HTML und CSS einzulesen und dabei kämpf ich zur Zeit mit folgendem Problem: Ich möchte im Banner Bereich einen Link rechtsbündig ausrichten, doch das klappt irgendwie nicht egal was ich probier.

HTML:

Code:

 
<body>
 <div id="head">
  <h1><img src="banner.jpg" alt="Banner" width="1024" height="90" /></h1>

  <ul>
   <li><a href="-">Home</a></li>
  </ul>
 </div>
</body>

CSS:

Code:

div#head {}

#head h1 {
  position: fixed;
  margin: 0;
  padding: 0;
  width: 1024px;
  height: 90px;
}

#head ul li {
  float: right; /* right bringt hier leider nicht den gewünschten Effekt */
  list-style: none;
}

Ich hab schon alles mögliche (was mir einfällt) probiert und leider klappt nichts davon - gibt es für sowas ein "Dirty-Workaround" oder geht es auch mit sauberen/normalen Mitteln die ich anscheinend überseh?

tia

Btw. Hat vielleicht zu dem Thema jemand eine Buch-Empfehlung (DE oder ENG ist egal) - ich bin beim Googlen über die Heads-First Serie (konkret: Head First HTML with CSS & XHTML) gestolpert, kann die jemand empfehlen?

Gräflicher schrieb am 08.08.2010 um 21:28

text-align:right; schon ausprobiert?

cr0ssSyntaX schrieb am 08.08.2010 um 21:51

Zitat von Gräflicher
text-align:right; schon ausprobiert?

ack, float: right; macht was anderes

Spikx schrieb am 08.08.2010 um 22:00

Ich denke er will später mal mehr als nur Home drin haben. Dann könnte man das ul float:right; machen und die li float:left;

p1perAT schrieb am 08.08.2010 um 22:28

'text-align' funktioniert bei Blockelementen (leider; <ul> und <li> gehören dazu) nicht.

@Spikx Nein, da soll dann nur der eine Link drin sein.

Spikx schrieb am 08.08.2010 um 22:30

text-align hat zwar keine Auswirkung auf Blockelemente, aber auf den Text darin. Wenn dein li ein text-align:right hat und sonst nichts, sollte der Link darin rechts sein.

watchout schrieb am 09.08.2010 um 00:24

Zitat von p1perAT

CSS:

Code:

div#head {}

head h1 {
  position: fixed;
  margin: 0;
  padding: 0;
  width: 1024px;
  height: 90px;
}

head ul li {
  float: right; /* right bringt hier leider nicht den gewünschten Effekt */
  list-style: none;
}

Ist das absicht dass vor dem head überall das "#" fehlt?

p1perAT schrieb am 09.08.2010 um 07:35

Morgen, die fehlenden # waren keine Absicht - die sind im CSS File natürlich drin (hab's im Post auch ausgebessert, danke).

text-align bewirkt leider nichts auch wenn ich es zum 'head ul li' hinzufüg. :confused:

Edit: Hab's - text-align funktioniert doch. Ich hab aber zu <li> noch eine width Angabe hinzufügen müssen. thx all

Kann vll. jemand etwas zu dem Buch sagen?

Crash Override schrieb am 09.08.2010 um 12:30

http://selfhtml.org/

watchout schrieb am 09.08.2010 um 12:42

Zitat von p1perAT
Morgen, die fehlenden # waren keine Absicht - die sind im CSS File natürlich drin (hab's im Post auch ausgebessert, danke).

text-align bewirkt leider nichts auch wenn ich es zum 'head ul li' hinzufüg.

Edit: Hab's - text-align funktioniert doch. Ich hab aber zu <li> noch eine width Angabe hinzufügen müssen. thx all

Kann vll. jemand etwas zu dem Buch sagen?

In welchem Browser testest du das? Weil es sollte normal ohne width auch gehen

Spikx schrieb am 09.08.2010 um 13:31

Zitat von watchout
In welchem Browser testest du das? Weil es sollte normal ohne width auch gehen

Vielleicht hatte er das float: noch drin.

btw. @p1perAT: für web development ist es sehr empfehlenswert Extensions wie Web Developer und Firebug zu verwenden. Mit ersterem hättest du dir bspw. zum "debuggen" die outlines von block elementen anzeigen lassen können.

p1perAT schrieb am 09.08.2010 um 20:06

Getestet wird mit IE7 und Firefox - hab ein 'position' drin, ohne 'width' steht der Link außerhalb vom Banner.

@Crash Override Danke aber SelfHTML (sowie auch w3Schools, css4you und wie sie alle heißen) kenn ich, ich arbeite bei solchen Themen trotzdem lieber mit Büchern, da ich so z.B. in der UBahn auch mal etwas nachlesen/wiederholen kann. Zum schnell mal nachsehen gibt's aber natürlich nichts angenehmeres.

@Spikx Danke für die Extensions vor allem Web Devloper gefällt (Firebug hatte ich schon).

Nico schrieb am 09.08.2010 um 20:13

dann besorgs dir in buchform
http://www.amazon.de/HTML-Handbuch-...7542&sr=8-1