CSS Problem - Link rechtsbündig ausrichten - Forum

p1perAT

-

Registered: Sep 2009
Location: AT
Posts: 2936

08.08.2010 - 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?

Bearbeitet von p1perAT am 09.08.2010, 07:32

Gräflicher

Here to stay

Registered: Dec 2001
Location: Baden bei Wien
Posts: 976

08.08.2010 - 21:28

text-align:right; schon ausprobiert?

cr0ssSyntaX

der quotenchinese

Registered: Jan 2004
Location: /root/home
Posts: 1884

08.08.2010 - 21:51

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

ack, float: right; macht was anderes

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

08.08.2010 - 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

-

Registered: Sep 2009
Location: AT
Posts: 2936

08.08.2010 - 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

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

08.08.2010 - 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

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

09.08.2010 - 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?

Bearbeitet von watchout am 09.08.2010, 00:25 (quote verkürzt)

p1perAT

-

Registered: Sep 2009
Location: AT
Posts: 2936

09.08.2010 - 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?

Bearbeitet von p1perAT am 09.08.2010, 07:48

Crash Override

BOfH

Registered: Jun 2005
Location: Germany
Posts: 2951

09.08.2010 - 12:30

http://selfhtml.org/

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

09.08.2010 - 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

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

09.08.2010 - 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

-

Registered: Sep 2009
Location: AT
Posts: 2936

09.08.2010 - 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

former person of interest

Registered: Sep 2006
Location: -
Posts: 4082

09.08.2010 - 20:13

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

p1perAT - Registered: Sep 2009 Location: AT Posts: 2936	08.08.2010 - 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? Bearbeitet von p1perAT am 09.08.2010, 07:32*
Gräflicher Here to stay Registered: Dec 2001 Location: Baden bei Wien Posts: 976	08.08.2010 - 21:28 text-align:right; schon ausprobiert?
cr0ssSyntaX der quotenchinese Registered: Jan 2004 Location: /root/home Posts: 1884	08.08.2010 - 21:51 Zitat von Gräflicher text-align:right; schon ausprobiert? ack, float: right; macht was anderes
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	08.08.2010 - 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 - Registered: Sep 2009 Location: AT Posts: 2936	08.08.2010 - 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 My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	08.08.2010 - 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 Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	09.08.2010 - 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? Bearbeitet von watchout am 09.08.2010, 00:25* (quote verkürzt)
p1perAT - Registered: Sep 2009 Location: AT Posts: 2936	09.08.2010 - 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. 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? Bearbeitet von p1perAT am 09.08.2010, 07:48
Crash Override BOfH Registered: Jun 2005 Location: Germany Posts: 2951	09.08.2010 - 12:30 http://selfhtml.org/
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	09.08.2010 - 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 My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	09.08.2010 - 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 - Registered: Sep 2009 Location: AT Posts: 2936	09.08.2010 - 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 former person of interest Registered: Sep 2006 Location: - Posts: 4082	09.08.2010 - 20:13 dann besorgs dir in buchform http://www.amazon.de/HTML-Handbuch-...7542&sr=8-1

CSS Problem - Link rechtsbündig ausrichten

Forum Index > Software > Coding Stuff

p1perAT

Gräflicher

cr0ssSyntaX

Spikx

p1perAT

Spikx

watchout

p1perAT

Crash Override

watchout

Spikx

p1perAT

Nico