Autor |
Nachricht |
-
tommaaaaaaaay
|
28.01.2013 um 15:56 (UTC) Titel: CSS-DESIGN:Neue IDs / Klassen abhängig vom Container machen? |
|
|
Hey Leute, ich hoffe ihr könnt mir helfen!
Ich bin gerade dabei, eine kleine Test-Homepage für eine Organisation zu bauen.
Sieht alles ganz gut aus bis jetzt, aber ich habe trotzdem ein kleines Problem:
Habe eine Box und eine Navigation hinzugefügt (die alte Navi habe ich ausgeblendet), jedoch sind deren Positionen abhängig von der Bildschirmgröße, was ja mit "margin" zusammenhängt und damit, dass ich diese Objekte, die nicht im Standard-Code des CSS-Designs enthalten sind, nicht in den eigentlichen #container bekomme.
Wie bekommt man das hin?
Hier noch die Codes:
Über dem Design:
Code:
<div style="margin: 0px auto; overflow:hidden;">
<div id="navigation">
<a class "home" href="/Home.htm"><img src="http://www10.pic-upload.de/25.01.13/coykplfzl2yx.png"/></a>
<a class "kontakt" href="/kontakt.htm"><img src="http://www7.pic-upload.de/25.01.13/pmlc5tpizz2.png" alt="bild" border="0" /></a>
<a class "news" href="/news.htm"><img src="http://www10.pic-upload.de/25.01.13/fiezbvemdcoj.png" alt="bild" border="0" /></a>
</div>
Unter dem Design:
Code:
<table cellspacing="0" cellpadding="0" border="0" width="168" class="rb_Box" id="table1">
<tbody>
<tr>
<td>Hier kommt dein Text rein</td>
</tr>
</tbody>
</table>
</div>
CSS-Code ohne Style Tags:
Code: body {
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
line-height:21px;
color:#a39e7d;
min-width:1094px;
background:url('http://www7.pic-upload.de/25.01.13/ldqztt1mjvdm.jpg') center 0 repeat #91a550;
position:relative;
margin:0 auto;
padding-bottom:50px;
text-align:center;
}
#container {
background:url('http://i.imagebanana.com/img/0nj78jrx/wei.jpg') 0 0px repeat;
width:960px;
min-height: 550px;
padding:1px 70px 0 64px;
margin:0 auto;
position:relative;
margin-top:54px;
border-style:outset; border-width:medium; border-color:#553931;
z-index:1;
}
.header {
background:url('http://www7.pic-upload.de/26.01.13/91p8jc8o2f7a.jpg') 0 0px no-repeat;
width:562px;
height:155px;
margin:0 auto;
position:relative;
text-indent: -999em;
}
h1,h2,h3,h4,h5,h6{line-height:1.3em;color:#553931;font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase;}
h1{font-size:26px;}
h2{font-size:24px;}
h3{font-size:22px; line-height:27px;}
h3 span {color:#91a550;}
h4{font-size:20px; line-height:24px;}
h4 span {color:#91a550;}
h5{font-size:18px;}
h6{font-size:16px;}
a {text-decoration:none; cursor:pointer; color:#91a550;}
a:hover {text-decoration:underline;}
a.link {cursor:pointer; color:#553931; display:inline-block; text-decoration:underline; text-align:center;}
a.link:hover { text-decoration:none;}
#content {
position:relative;
top: 10px;
}
a.home { background:url('http://www10.pic-upload.de/25.01.13/coykplfzl2yx.png');}
a.home:hover { background:url('http://www7.pic-upload.de/26.01.13/x3khlt4vve6f.png'); }
a.home:active { background:url('http://www10.pic-upload.de/26.01.13/vpyejfhr9d.png'); }
a.kontakt { background:url('http://www7.pic-upload.de/25.01.13/pmlc5tpizz2.png'); }
a.kontakt:hover { background:url('http://www10.pic-upload.de/26.01.13/vfyjv7rluvlm.png'); }
a.kontakt:active { background:url('http://www7.pic-upload.de/26.01.13/i3yusrbzmez.png'); }
a.news { background:url('http://www10.pic-upload.de/25.01.13/fiezbvemdcoj.png'); }
a.news:hover { background:url('http://www10.pic-upload.de/26.01.13/odtsc8qyna5w.png'); }
a.news:active { background:url('http://www7.pic-upload.de/26.01.13/byml4f9guytc.png'); }
.lsp {letter-spacing:-1px !important;}
#counter {
display:none;
}
#nav_container {
display:none;
}
#webme_footer_textlink_dont_hide {
color: white;
background-color: transparent;
}
#navigation {
z-index: 2;
position: absolute;
margin-top: 220px;
width: 500px;
height: 30px;
}
table.rb_Box {
z-index: 3;
position:absolute;
left:900px
;top:600px;
border:3px solid #000000;
}
[/u]
Zuletzt bearbeitet von tommaaaaaaaay am 28.01.2013, 16:59, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
|
28.01.2013 um 16:33 (UTC) Titel: Re: Neue IDs / Klassen abhängig vom Container machen? |
|
|
Hallo,
das passiert, wenn man seine Elemente einfach absolut positioniert, statt für einen vernünftigen Elementfluss zu sorgen.
Du hattest ja im Prinzip nicht schlecht angefangen, indem du ein Element um deine Navi und den #container gelegt hast.
Ich habe mir erlaubt, dieses Element #neuerContainer zu nennen und habe ihm die Style-Informationen des #container zugewiesen.
Ferner habe ich einen neuen Header ( #neuerHeader) über der Navigation hinzugefügt und ihm die Informationen zugewiesen, die vorher für .header gedacht waren. (Damit ist die Navigation nach wie vor unter dem Header.)
Die absolute Positionierung der Navigation habe ich erst einmal /* auskommentiert, da sie unnötig ist. */
Ach ja, und drei fehlende = habe ich hinzugefügt
http://transint-test.de.tl
Über dem Design:
tommaaaaaaaay hat Folgendes geschrieben: <div id="neuerContainer">
<div id="neuerHeader"></div>
<div id="navigation">
<a class="home" href="/Home.htm"><img src="http://www10.pic-upload.de/25.01.13/coykplfzl2yx.png"/></a>
<a class="kontakt" href="/kontakt.htm"><img src="http://www7.pic-upload.de/25.01.13/pmlc5tpizz2.png" alt="bild" border="0" /></a>
<a class="news" href="/news.htm"><img src="http://www10.pic-upload.de/25.01.13/fiezbvemdcoj.png" alt="bild" border="0" /></a>
</div>
Unter dem Design:
tommaaaaaaaay hat Folgendes geschrieben: <table cellspacing="0" cellpadding="0" border="0" width="168" class="rb_Box" id="table1">
<tbody>
<tr>
<td>Hier kommt dein Text rein</td>
</tr>
</tbody>
</table>
</div>
CSS-Code ohne Style Tags:
tommaaaaaaaay hat Folgendes geschrieben: body {
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
line-height:21px;
color:#a39e7d;
min-width:1094px;
background:url('http://www7.pic-upload.de/25.01.13/ldqztt1mjvdm.jpg') center 0 repeat #91a550;
position:relative;
margin:0 auto;
padding-bottom:50px;
text-align:center;
}
#neuerContainer {
background:url('http://i.imagebanana.com/img/0nj78jrx/wei.jpg') 0 0px repeat;
width:960px;
min-height: 550px;
padding:1px 70px 0 64px;
margin:0 auto;
position:relative;
margin-top:54px;
border-style:outset; border-width:medium; border-color:#553931;
z-index:1;
}
#neuerHeader {
background:url('http://www7.pic-upload.de/26.01.13/91p8jc8o2f7a.jpg') 0 0px no-repeat;
width:562px;
height:155px;
margin:0 auto;
position:relative;
text-indent: -999em;
}
h1,h2,h3,h4,h5,h6{line-height:1.3em;color:#553931;font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase;}
h1{font-size:26px;}
h2{font-size:24px;}
h3{font-size:22px; line-height:27px;}
h3 span {color:#91a550;}
h4{font-size:20px; line-height:24px;}
h4 span {color:#91a550;}
h5{font-size:18px;}
h6{font-size:16px;}
a {text-decoration:none; cursor:pointer; color:#91a550;}
a:hover {text-decoration:underline;}
a.link {cursor:pointer; color:#553931; display:inline-block; text-decoration:underline; text-align:center;}
a.link:hover { text-decoration:none;}
#content {
position:relative;
top: 10px;
}
a.home { background:url('http://www10.pic-upload.de/25.01.13/coykplfzl2yx.png');}
a.home:hover { background:url('http://www7.pic-upload.de/26.01.13/x3khlt4vve6f.png'); }
a.home:active { background:url('http://www10.pic-upload.de/26.01.13/vpyejfhr9d.png'); }
a.kontakt { background:url('http://www7.pic-upload.de/25.01.13/pmlc5tpizz2.png'); }
a.kontakt:hover { background:url('http://www10.pic-upload.de/26.01.13/vfyjv7rluvlm.png'); }
a.kontakt:active { background:url('http://www7.pic-upload.de/26.01.13/i3yusrbzmez.png'); }
a.news { background:url('http://www10.pic-upload.de/25.01.13/fiezbvemdcoj.png'); }
a.news:hover { background:url('http://www10.pic-upload.de/26.01.13/odtsc8qyna5w.png'); }
a.news:active { background:url('http://www7.pic-upload.de/26.01.13/byml4f9guytc.png'); }
.lsp {letter-spacing:-1px !important;}
#counter {
display:none;
}
#nav_container {
display:none;
}
#webme_footer_textlink_dont_hide {
color: white;
background-color: transparent;
}
#navigation {
z-index: 2;
/* position: absolute;
margin-top: 220px; */
width: 500px;
height: 30px;
}
table.rb_Box {
z-index: 3;
position:absolute;
left:900px
;top:600px;
border:3px solid #000000;
}
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 28.01.2013, 17:36, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
-
tommaaaaaaaay
|
28.01.2013 um 16:49 (UTC) Titel: |
|
|
VIELEN DANK,
du bist meine Rettung |
|
↑
|
|
|
-
tommaaaaaaaay
|
28.01.2013 um 16:56 (UTC) Titel: |
|
|
Eine Frage hätte ich dann doch noch, das war der Grund warum ich vorrübergehend die 3 "=" entfernt habe:
Was stimmt den mit den Navi-Buttons nicht? Ich sehe sie doppelt und untereinander versetzt, was muss ich hier verändern?
Zuletzt bearbeitet von tommaaaaaaaay am 28.01.2013, 18:46, insgesamt einmal bearbeitet
|
|
↑
|
|
|
|
28.01.2013 um 17:54 (UTC) Titel: |
|
|
Also, bei mir sind sie mittig nebeneinander.
Mach doch mal einen Screenshot.
Ach ja: Welchen Browser verwendest du?
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 28.01.2013, 18:57, insgesamt 2-mal bearbeitet
|
|
↑
|
|
|
-
tommaaaaaaaay
|
|
↑
|
|
|
|
28.01.2013 um 20:15 (UTC) Titel: |
|
|
Mir fällt jetzt erst auf, du hast jeweils ein Bild als Link eingefügt.
Dadurch sieht man natürlich das Hindergrundbild als Hovereffekt nicht. (Außerdem musst du für jeden Link drei (Hintergrund-)Bilder erstellen, die hochladen und jeden Menüpunkt einzeln formatieren.)
Ich habe deine Navi mal etwas umgebaut:
http://transint-test.de.tl/
Das hätte folgende Vorteile:
1. Link hinzufügen / ändern ohne Bilder malen, CSS-Code-basteln entfällt
2. Design ändern oder farblich anpassen ohne Grafiken zu ersetzen
3. Keine längeren Ladezeiten wegen der Bilder (die ich übrigens eher als jpg speichern würde als als png )
Nur so eine Idee, die "Bilderlösung" kann man natürlich auch beibehalten bzw. auch optimieren
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 28.01.2013, 21:15, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
tommaaaaaaaay
|
28.01.2013 um 20:49 (UTC) Titel: |
|
|
oh man, warum bin ich auf sowas nicht früher gekommen?
Vielen Dank, du hast mir heute sehr geholfen, danke! |
|
↑
|
|
|
|
29.01.2013 um 06:30 (UTC) Titel: |
|
|
tommaaaaaaaay hat Folgendes geschrieben: Vielen Dank, du hast mir heute sehr geholfen, danke!
Aber gerne doch
Übrigens, einen Tipp hab ich noch: Entferne beim body die line-height-Eigenschaft. Die mag zwar dann und wann ganz nützlich sein, aber in dem Fall kannst du sie immer noch für das entsprechende Element definieren.
Bei deinem Neuigkeiten-Marquee zum Beispiel schneidet es mir aber den oberen Rand ab
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
|