Willkommen in der Webstatt
User-1 am 13.06.06 19:12

hallo, ich würde gerne dieses design http://www.woody.bierquartier.de/woody-web.png in richtiges html/css umgesetzt haben.. alles was dabei bis jetzt rausgekommen ist ist hier zu sehen: http://www.xyz-70.bierquartier.de/test/woody
was mache ich falsch? wie geht das richtig?

netcup.de Warum gibt es hier Werbung?
User-2 am 13.06.06 19:34

der link zu dem png-bild klappt bei mir net

User-3 am 13.06.06 20:10

bei mir gehts auch nicht!

User-1 am 13.06.06 20:55

jetzt aber.so wie siehts aus was muss man machen

User-4 am 14.06.06 17:58

:P Liste!!!

http://www.stichpunkt.de/css/menues.html

User-5 am 14.06.06 20:45

hier noch einige (z.t sehr schöne) Beispiele zu Listen... -> http://css.maxdesign.com.au/listamatic/index.htm

User-1 am 14.06.06 23:25

k thx

User-1 am 19.06.06 16:12

ich war jetzt die ganze zeit am versuchen, aer ich bekomme das menü einfach nicht hin.
http://xyz-70.bierquartier.de/test/woody

html: <div class="logo"></div>
<div class="kleiner_strich">
<ul id="menue">
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
</ul>
</div>

css
body {
font-family: verdana;
font-size: 11px;
}

.kleiner_strich {
background: url(kleiner_strich.png);
width: 609px;
height: 20px;
border: solid 1px black;
}

#menue {
width: 360px;
height: 19px;
}

#menue li {
display: inline;
height: 19px;
}

#menue a {
height: 19px;
}

#menue a:hover {
background: url(kleiner_strich_hover.png);
height: 19px;
}

User-5 am 19.06.06 16:18

mach mal ein padding:0; und margin:0; beim ul{} rein

User-1 am 19.06.06 18:16

schon besser. aber warum funktioniert der hover nicht?

User-4 am 19.06.06 18:18

"width" beim a...

Edit: Falsch, "display: block"... Ach versuch einfach beides...

User-1 am 19.06.06 18:26

bringt beides nix

User-4 am 19.06.06 18:43

Wieso machst du denn im a:hover nicht einfach einen "border-bottom"? Oder versteh ich das falsch?! der graue Streifen soll doch rot werden?!

User-1 am 19.06.06 18:48

dazu noch 1 px größer und ausserdem rechts und links jeweils 1 px breit platz.

User-4 am 19.06.06 19:08

Und wo liegt das Problem?! Mit margin bzw. padding arbeiten...

Hier mal 'n Ansatz, muss nur noch den roten Streifen nach oben hin vergrößernd machen...

body {
font-family: verdana;
font-size: 11px;
}

.kleiner_strich {
background: url(kleiner_strich.png);
width: 609px;
height: 20px;
}

#menue {
width: 360px;
height: 19px;
padding: 0 0 0 5px;
margin: 0;
}

#menue li {
display: inline;
height: 19px;
margin: 0 0 0 5px;
}

#menue li a {
color: #000;
height: 19px;
text-decoration: none;
margin: 0 1px 0 1px;
}

#menue li a:hover {
border-bottom: 6px solid #FF0000;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
margin: 0;
}


Mach die kleiner_strich.png nach oben hin einen Px größer und verändere die Größen im CSS dementsprechend dann sollte es gehen...

Edit: Im IE siehts mal wieder leicht komisch aus...

User-1 am 19.06.06 19:58

im opera leider auch. aber ich denke das geht soweit. danke!

User-4 am 19.06.06 20:40

Hier nochmal mit Bild:

body {
font-family: verdana;
font-size: 11px;
}

.kleiner_strich {
background: url(kleiner_strich.png);
width: 609px;
height: 20px;
}

#menue {
height: 19px;
padding: 0 0 0 5px;
margin: 0;
list-style-type: none;
}

#menue li {
float: left;
height: 19px;
width: 60px;
margin: 0 10px 0 0;
}

#menue li a {
color: #000;
display: table;
height: 19px;
width: 60px;
text-decoration: none;
text-align: center;
margin: 0 1px;
padding: 0 3px;
}

#menue li a:hover {
background: url(kleiner_strich_hover.png);
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
display: block;
height: 19px;
margin: 0;
}

User-1 am 19.06.06 20:53

DANKE

jetzt habe ich natürlich das nächste problem. ich habe die seite geupdated. und warum ist im ie der rote text da wo er sein soll, nämlich rechts vom schwarzen text, im ff/opera aber nicht?

User-5 am 19.06.06 21:04

wahrscheinlich weil der IE pixelangaben falsch interpretiert... der Text ist ja gefloatet, aber im FF wird er auf eine neue Zeile gesetzt weil er zu breit ist. (im IE wirds falsch gerechnet... darum passts noch)

kannst du verhindern in dem du zb <br style="clear:left;" /> einfügst, dann ists im IE auch unten

User-1 am 19.06.06 21:09

ich wills aber doch rechts haben

User-5 am 19.06.06 21:14

dann musst du die widht etwas kleiner machen

User-1 am 19.06.06 21:19

habe ich. geht trozdem nicht...

User-1 am 21.06.06 14:56

HALLO?

weis keiner wie ich den roten text ohne tabelle auf die rechte seite bringen kann?

http://www.xyz-70.bierquartier.de/test/woody
http://www.xyz-70.bierquartier.de/test/woody/woody.css

User-4 am 21.06.06 15:29

Nicht mit einem DIV :P

Stichwort: Divsalat!

Die großen Striche, für die du einzelne DIVs genommen hast machst du jeweils einen Rahmen unten und oben an ein DIV.
xyz-48n kein extra div als spacer sondern margin-top.

Regel: So wenig divs wie möglich!

In dieses Div kommen dann nur <p class="text"> und <p class="untermenue">

Für deinen Fehler sorgt die Reihenfolge bzw. die Breite der Objekte.

Also so funktionierts:

<div id="content">

<p class="untermenue"></p>
<p class="text"></p>

</div>

div#content {
border-top: 8px solid #000;
border-bottom: 6px solid #000;
margin: 9px 0 0 0;
width: 612px;
}

p.text {
margin: 0;
width: 411px;
}

p.untermenue {
float: right;
color: #FF0000;
margin: 0 0 0 10px;
width: 188px;
}


Außerdem fänd ich "text-align: justify;" besser.

Edit: Fürs Logo brauchts im Übrigen auch kein Div -> Image Replacement.

Und am Menue fällt mir auf kann man das"Kleiner_srtich-Div" weglassen und als BG für das <ul> nehemen.

Mfg...

User-1 am 22.06.06 12:21

DANKE erstmal
jetzt gibt es nur zwei probleme:

1. wenn "untermenue" länger ist als "text" dann gibt das unschöne überlagerungseffeckte, muss man da nicht dann div.bla {clear: both;} machen?

2. wenn ich eine überschrift im text haben will wie sollte ich die markieren? mit h1? oder wie? weil wenn ich die überschrift wie folgt einsetze: <p class="text"><h1 class="ueberschrift">Sie</h1> erinnern sich.</p> dann funtioniert p.text{text-align: justify;} nicht mehr. was kann man da machen? zumal wenn ich neben die überschrift noch ein datum in anderer formatierung setzen will?

User-4 am 22.06.06 14:45

<h1> Würde ich sowieso nicht für Artikel sondern den Header verwenden. Suchmaschinen Optimierung.

Und dann machst halt:

<h2>Deutschland - Braxyz-190en <span>09.07.2006</span></h2>

<p class="artikel">Juhu, Weltmeister!</p>

Und wie gesagt für den Header:

<h1><span>Woody - professional pwnage since 1987</span></h1>h1 {
background: url(...bild..);
height: ...;
width: ...;
}

h1 span {
display: none;
}


Zu dem float fällt mir gerade nichts anderes ein als ein <p> mit

p.clear {
clear: right;
}
unten in das content-DIV zu setzen. Geht aber bestimmt eleganter.....

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt