Webstatt.org - Community seit 2006 - 2012 (2024?)

design in css richtig umsetzen

Avatar user-180
13.06.2006 17:12

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

may the force be with you. but mostly with me.
user-157
13.06.2006 17:34

der link zu dem png-bild klappt bei mir net

asdf!
Avatar user-164
13.06.2006 18:10

bei mir gehts auch nicht!

Avatar user-180
13.06.2006 18:55

jetzt aber.so wie siehts aus was muss man machen

may the force be with you. but mostly with me.
Avatar user-289
14.06.2006 15:58

frech Liste!!!

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

Interesse? meine Referenzen. hier!!!
Avatar user-162
14.06.2006 18:45

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

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
14.06.2006 21:25

k thx

may the force be with you. but mostly with me.
Avatar user-180
19.06.2006 14: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;
}

may the force be with you. but mostly with me.
Avatar user-162
19.06.2006 14:18

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

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
19.06.2006 16:16

schon besser. aber warum funktioniert der hover nicht?

may the force be with you. but mostly with me.
Avatar user-289
19.06.2006 16:18

"width" beim a...

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

Interesse? meine Referenzen. hier!!!
Avatar user-180
19.06.2006 16:26

bringt beides nix

may the force be with you. but mostly with me.
Avatar user-289
19.06.2006 16: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?!

Interesse? meine Referenzen. hier!!!
Avatar user-180
19.06.2006 16:48

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

may the force be with you. but mostly with me.
Avatar user-289
19.06.2006 17: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...

Interesse? meine Referenzen. hier!!!
Avatar user-180
19.06.2006 17:58

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

may the force be with you. but mostly with me.
Avatar user-289
19.06.2006 18: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;
}

Interesse? meine Referenzen. hier!!!
Avatar user-180
19.06.2006 18: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?

may the force be with you. but mostly with me.
Avatar user-162
19.06.2006 19: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

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
19.06.2006 19:09

ich wills aber doch rechts haben

may the force be with you. but mostly with me.
Avatar user-162
19.06.2006 19:14

dann musst du die widht etwas kleiner machen

Perfection is not when there’s nothing to add, but when there’s nothing to take away swisscheek.com/magazine
Avatar user-180
19.06.2006 19:19

habe ich. geht trozdem nicht...

may the force be with you. but mostly with me.
Avatar user-180
21.06.2006 12:56

HALLO?

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

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

may the force be with you. but mostly with me.
Avatar user-289
21.06.2006 13:29

Nicht mit einem DIV frech

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

Interesse? meine Referenzen. hier!!!
Avatar user-180
22.06.2006 10: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?

may the force be with you. but mostly with me.
Avatar user-289
22.06.2006 12: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.....

Interesse? meine Referenzen. hier!!!