Suche im Forum:
Suchen


Autor Nachricht
Beitrag17.08.2010 um 13:10 (UTC)    
Titel: Brauche hilfe bei Css eigenem Desing

hallo also ich hab mich jetzt selbst an das desing mit hilfe eines toutorials gewagt und das ist dabei herausgekommen www.hobby-kg.de.tl

nun hätte ich noch ein paar dinge anderst
1. ich möchte dass alle Navigationsbuttons gleich gros sind.
2. möchte ich abstände zwischen header, navi und textfeld wo man das hintergrundbild sieht
http://img.webme.com/pic/h/hobby-kg/unbenannt.png

hier mein aktueller Code

Code:
#header, #title {
display: none;
width: 0px;
height: 0px;
}

table[height="102"] { margin:auto;}
/* Allgemein */

body {
background-image: url(); /* Wenn vorhanden, Klammer mit Bildadresse füllen */
background-color: #000000; /* Hintergrundfarbe mithilfe eines Hex-Codes*/
font-family: sans-serif; /* Schriftart */
font-size: 0.8em; /* Schriftgröße */
text-align: center; /* zentriert das Design im IE */
}

a {
color: #000; /* Farbe der Links */
}
/* Container */

#design1 {
width: 900px; /* Breite des Designs */
margin: 0 auto; /* zentriert das Design */
text-align: left; /* positioniert den Text links */
background-color: #fff; /* Hintergrundfarbe des Containers */

}

#unten {
clear: both; /* sorgt dafür, das Hintergrundfarbe über gesamten Container läuft */
}
/* Header */

#header_container {
height: 150px; /* Höhe des Headers */
background-image: url(http://img.webme.com/pic/h/hobby-kg/hobbykgheader.gif);

}

#pre_header, #post_header {
display: none; /* entfernt nicht genutzte Klassen */
}

#header {
margin: 0px; /* entfernt den weißen Rand oben */
padding-left: 400px; /* Abstand vom linken Rand */
padding-top: 50px; /* Abstand vom oberen Rand */
color: #000; /* Schriftfarbe */
font-family: serif; /* Schriftart */
}

/* Navigation */

#nav_heading {
display: none; /* nicht genutzte Klasse wird entfernt */
}

#nav {
padding: 0; /* keinen Innenabstand der Liste (links und rechts) */
margin: 10; /* keinen Außenabstand der Liste (oben und untent) */
}

#nav li {
list-style-type: none; /* löscht den Listenpunkt */
padding: 2px; /* Innenabstand eines einzelnen Punktes */
padding-left: 1px; /* Innenabstand eines einzelnen Punktes nach links */
padding-right: 50px; /* Innenabstand eines einzelnen Punktes nach rechts */
font-size: 1.2em; /* Schriftgröße */
display: block; /* vergrößert die Navigation auf volle nav_container Breite */

float: left; /* Jedes Navigationselement hat einen linken Umfluss, dadurch wird eine horizontale Navigation erstellt */
}

#nav li:hover {
background-color: #ffd194; /* Hintergrundfarbe beim Hovereffekt */
}

#nav li.subpage {
display: none /* Unterseiten werden unsichtbar. Bei horizontalen Navigationen immer praktisch */
}

#nav a {
text-decoration: none; /* macht Verlinkungen in der Navigation ohne Unterstrich */
}

#nav a:hover {
color: #141414; /* ändert die Schriftfarbe beim Hovereffekt */
}
/* Content Container */

#content_container {
width: 900px; /* Definiert die Breite des gesamten Contentbereiches inklusive der Sidebar (daher normalerweise Breite des Containers) */
}

/* Content */

#content_container {
float: left; /* positioniert den Content links neben die Navigation */
width: 900px; /* Briete des Contents */

}

#content {
padding: 30px; /* Innenabstand des Contents */
}


/* Klassen entfernen */

#counter {
display: none; /* Sidebar und Counter werden unsichtbar gemacht */
}


Zuletzt bearbeitet von hobby-kg am 18.08.2010, 11:39, insgesamt 4-mal bearbeitet
Beitrag18.08.2010 um 15:22 (UTC)    
Titel:

gibts keinen der sich damit auskennt?
Beitrag18.08.2010 um 18:14 (UTC)    
Titel:

Code:
#nav_container {
margin: 10px 0px 10px 0p /* Außenabstand oben/rechts/unten/links */
}


Die Pixelangaben kannst du natürlich anpassen.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag18.08.2010 um 18:38 (UTC)    
Titel:

wo genau im code soll das den hin und was bewirkt es genau??
Beitrag18.08.2010 um 19:16 (UTC)    
Titel:

Der Code gehört hier hin:
Arrow Login
Arrow Design einstellen
Arrow Erweitere Einstellungen
Arrow Css Code ohne Styletags

Der Code definiert das Aussehen der ID nav_container, der Box in der sich die einzelnen Navigationslink aufreihen.
Du möchtest, dass der Hintergrund zwischen Header/Content und Navi sichtbar ist, also musst du einen Außenabstand der Navi zu den anderen Elementen einfügen.
Das wird hier mit dem Css-Befehl margin: 10px 0px 10px 0px bewerkstelligt.
Die erste Pixelangabe bezieht sich auf den oberen Abstand, zweite auf rechts, dritte unten, vierte links.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag18.08.2010 um 19:56 (UTC)    
Titel:

es funktioniert nicht
Beitrag18.08.2010 um 20:26 (UTC)    
Titel:

hobby-kg hat Folgendes geschrieben:
es funktioniert nicht

Ja und zwar weil ich mal wieder einen Leichtsinnsfehler hingelegt habe.

Code:
#nav_container {
margin: 10px 0px 10px 0px;  /* Semikolon vergessen */
}

______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag18.08.2010 um 20:29 (UTC)    
Titel:

hmm ok die abstände sind größer geworden doch es ist immer noch alle weiß
Beitrag18.08.2010 um 21:32 (UTC)    
Titel:

Ah ok, ich hab deinen Quellcode mal genauer inspiziert und festgestellt, dass der ID designl einen weisen Hintergrund zugeteilt hast und da alle anderen Elemente in dieser ID eingebettet und transparent sind, haben diese auch einen weisen Hintergrund.

Du musst also das "background: #ffffff;" bei #designl entfernen.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag18.08.2010 um 23:33 (UTC)    
Titel:

ok gut wie man das einfärbt hab ich mehr oder weniger selbst rausgefunden
Weist du zufällig wie ich alle Navigationsbuttons gleich groß bekomm, damit ich die durch buttons ersetzen kann(sie sollen alle 100 px breit sein)? Und wie ich diese leiste unter das Textfeld bekomm als abschluss?
http://img.webme.com/pic/h/hobby-kg/abschlussleiste.png


Zuletzt bearbeitet von hobby-kg am 19.08.2010, 00:58, insgesamt 3-mal bearbeitet
Beitrag19.08.2010 um 11:39 (UTC)    
Titel:

Du kannst Links eine feste Größe zuteilen, indem du sie als Blöcke (display: block;) anzeigen lässt und anschließend eine Breite und Höhe definierst.
Code:
Code:

#nav a {
display: block;
width: 100px;
height: 20px;
float: left;
text-decoration: none;
}


Stichwort:
Dynamischer Content
http://www.homepage-baukasten.de/forum/viewtopic.php?t=118482&highlight=dynamischer+content
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.


Zuletzt bearbeitet von badweb am 19.08.2010, 18:47, insgesamt 2-mal bearbeitet
Beitrag19.08.2010 um 12:02 (UTC)    
Titel:

cool danke funtioniert perfekt

eine kleine frage noch dazu wie bekomm ich in der Navigation den Text weg und wie bekomm ich noch andere buttons rein?


Zuletzt bearbeitet von hobby-kg am 19.08.2010, 13:12, insgesamt einmal bearbeitet
Beitrag19.08.2010 um 13:36 (UTC)    
Titel:

Wenn du den Text ausblendest blendest du auch die Links aus.
Es wäre besser, wenn du die Buttons ohne Text als Hintergrund einfügst und die Linktexte mittig plazierst.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag19.08.2010 um 13:49 (UTC)    
Titel:

Du gibtst einfach jede Seite ein eigenes Bild via CSS - einfach dafür die nötige ID benutzen. Dann machst du, folgendes:
Code:

#nav a {
display:block;
width: 75px;
height: 18px;
font-size: 0px;
}


Einfach noch die richtigen Werte eintragen, da durch werden die Buttons ingesamt anklickbar sein und der Linktext wird nicht angezeigt.
______________
Spendet jetzt für den User -Name entfernt - , damit er sich ein Duden kaufen kann, da seine Schreibkünste die einens 11-jährigen sehr stark ähneln. Smile


Zuletzt bearbeitet von blutsegelbukaniere am 19.08.2010, 14:49, insgesamt einmal bearbeitet
Beitrag19.08.2010 um 14:03 (UTC)    
Titel:

ok die schrift ist weg

wie bekomm ich diese abschlussleiste unter das textfeld
http://img.webme.com/pic/h/hobby-kg/abschlussleiste.png


Zuletzt bearbeitet von hobby-kg am 19.08.2010, 16:09, insgesamt einmal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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