Willkommen in der Webstatt Zum Webstatt Blog und Stories
fish fish 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.fish.bierquartier.de/test/woody
was mache ich falsch? wie geht das richtig?

netcup.de Warum gibt es hier Werbung?
crooked am 13.06.06 19:34

der link zu dem png-bild klappt bei mir net

djonny djonny am 13.06.06 20:10

bei mir gehts auch nicht!

fish fish am 13.06.06 20:55

jetzt aber.so wie siehts aus was muss man machen

Remo1234 Remo1234 am 14.06.06 17:58

:P Liste!!!

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

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

fish fish am 14.06.06 23:25

k thx

fish fish am 19.06.06 16:12

ich war jetzt die ganze zeit am versuchen, aer ich bekomme das menü einfach nicht hin.
http://fish.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;
}

der_nic der_nic am 19.06.06 16:18

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

fish fish am 19.06.06 18:16

schon besser. aber warum funktioniert der hover nicht?

Remo1234 Remo1234 am 19.06.06 18:18

"width" beim a...

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

fish fish am 19.06.06 18:26

bringt beides nix

Remo1234 Remo1234 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?!

fish fish am 19.06.06 18:48

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

Remo1234 Remo1234 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...

fish fish am 19.06.06 19:58

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

Remo1234 Remo1234 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;
}

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

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

fish fish am 19.06.06 21:09

ich wills aber doch rechts haben

der_nic der_nic am 19.06.06 21:14

dann musst du die widht etwas kleiner machen

fish fish am 19.06.06 21:19

habe ich. geht trozdem nicht...

fish fish am 21.06.06 14:56

HALLO?

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

http://www.fish.bierquartier.de/test/woody
http://www.fish.bierquartier.de/test/woody/woody.css

Remo1234 Remo1234 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.
Dann 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...

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

Remo1234 Remo1234 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 - Brasilien <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