Suche im Forum:
Suchen


Autor Nachricht
Beitrag28.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
Beitrag28.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 Wink

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
Beitrag28.01.2013 um 16:49 (UTC)    
Titel:

VIELEN DANK,
du bist meine Rettung Very Happy
Beitrag28.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
Beitrag28.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
Beitrag28.01.2013 um 18:34 (UTC)    
Titel:

Ich benutze Chrome und bei mir sieht das so aus:

http://www7.pic-upload.de/28.01.13/wtyd1ma3w1hp.png


Edit: Frag mich nicht, wie ich das jetzt geschafft habe, es ist jetzt auf einmal nicht mehr doppelt.... Laughing
Trotzdem werden die Dinger nur zur Hälfte angezeigt....
Rolling Eyes


Zuletzt bearbeitet von tommaaaaaaaay am 28.01.2013, 19:43, insgesamt einmal bearbeitet
Beitrag28.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 Wink
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 Wink )

Nur so eine Idee, die "Bilderlösung" kann man natürlich auch beibehalten bzw. auch optimieren Wink

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
Beitrag28.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! Smile
Beitrag29.01.2013 um 06:30 (UTC)    
Titel:

tommaaaaaaaay hat Folgendes geschrieben:
Vielen Dank, du hast mir heute sehr geholfen, danke! Smile

Aber gerne doch Smile
Ü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 Wink

Gruß,
TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de