zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden <Div> ausrichten in <Div> mit BG.jpg

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.01.2006, 00:31
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard <Div> ausrichten in <Div> mit BG.jpg

Hallo, ich hab ein Problem mit der Div ausrichtung in divs

Ich habe das Problem, dass margin-top anscheinend nur das übergeordnete div beeinflusst.
ich wollte folgendes erreichen:

Ein Hintergrund für die ganze Menüleiste.
in diesem div (welches den hintergrund darstellt) eine <ul> die in CSS formatiert ist und die ID #Navi hat.
in den einzelnen[*]'s die einzelnen Links mit Rollover Images.

Also das hier ist erstmal meine classes.css
Code:
#Navi ul
{
 margin-left:54px;
 margin-top:14px;
 padding: 0;
 list-style-type: none;
}

#Navi ul li
{ display: inline; }

#Navi ul li #home
{
 background-image:url(./source/navi/home1.jpg);
 width:82px;
 height:43px;
}
#Navi ul li #home:hover
{ background-image:url(./source/navi/home2.jpg); }

und hier der HTML Code bzw. das Template
Code:
<html blablabla....>
 <div style="width:1020px;height:144px;background-image:url('{GFX_Dir}/header.jpg');"></div>
 <div style="width:1020px;height:71px;background-image:url('{GFX_Dir}/navigation_bg.jpg');margin-top:10px" id="Navi">
  <ul>[*]<div id="home" onClick="location.href='./?page=Home'"></div>[/list] </div>
</body blablabla...>
wenn ich für das div tag mit der id #home
margin-top:14px setze, verschiebt er das div mit der id #Navi (also das übergeordnete Div-Tag)

Ich wollte in dem #Navi bereich folgende koordinaten für den link.
margin-left:58px;
margin-top:14px;

{GFX_Dir} wird durch mein CMS ersetzt in das Template Verzeichnis


Kann man denn dies denn auch anders erreichen oder ist das "unmöglich" ?
Danke schon im voraus.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.01.2006, 00:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: <Div> ausrichten in <Div> mit BG.jpg

Zitat:
Zitat von Unsk1ll3d
wenn ich für das div tag mit der id #home
margin-top:14px setze, verschiebt er das div mit der id #Navi (also das übergeordnete Div-Tag)
Das sind wohl zusammenfallende Ränder.
Gib dem äußeren div #Navi den gewünschten Abstandswert als padding-top.

Zitat:
<div id="home" onClick="location.href='./?page=Home'"></div>
Was wird das? Wie wär's mit einem ganz normalen Link?


Bitte stell hier Code rein, der das Problem wirklich nachvollziehbar macht.
Anleitung
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.01.2006, 00:47
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard -.-

Ich versuche grade diesen Link:
http://www.unsk1ll3d.de/homepage/?se...esign&to=water

zu ent-"müllen" und mithilfe von CSS zu vereinfachen...
http://www.unsk1ll3d.de/homepage/?se...n&to=css_ready


und danke für den Link hat mir sehr weitergeholfen ^^
Mit Zitat antworten
  #4 (permalink)  
Alt 04.01.2006, 00:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: -.-

Zitat:
Zitat von Unsk1ll3d
Ich versuche grade diesen Link:
http://www.unsk1ll3d.de/homepage/?se...esign&to=water

zu ent-"müllen" und mithilfe von CSS zu vereinfachen...
http://www.unsk1ll3d.de/homepage/?se...n&to=css_ready
Ja, schon klar.
Bleibt trotzdem die Frage, warum du div-Elemente mit onclick versiehst, statt einfach LINKS zu setzen.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.01.2006, 00:55
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

kann ich <a> auch hintergründe mit background-image:url(); zuweisen ?

ich habs auch so probiert und entsprechend den CSS-Code umgeschrieben, hat aber nicht funktioniert:

Code:
<ul>[*][/list]
Der Sinn und Zweck der Sache ist es weg von javascript mir Rollover-Images zu kommen. Ursprünglich habe ich JScript dazu (onMouseOver,OnMouseOur) verwendet.

// edit mit <img> geht es nur mit onMouseOver, denn wenn ich das src-Attribut ändern will geht das nur mit JScript oder ?
Code:
[img]test1.jpg[/img]
Mit Zitat antworten
  #6 (permalink)  
Alt 04.01.2006, 00:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Unsk1ll3d
kann ich <a> auch hintergründe mit background-image:url(); zuweisen ?
Ja. Du musst aber Blockelemente draus machen, damit sie die gesamte Fläche einnehmen.
#Navi a {display:block}

Du hast doch in dem anderen Thread schon Beispiellinks bekommen.
edit: hier noch einer:
http://www.1ngo.de/web/bildwechsel.html

___

Wie soll jemand auf deiner Seite ohne JavaScript navigieren? Auch Google kann kein JavaScript...
Mit Zitat antworten
  #7 (permalink)  
Alt 04.01.2006, 01:25
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

Habs jetz hinbekommen...für diejenigen die das gleiche problem haben:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>TTc's Homepage</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1;">
 <link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#ffffff">
 <div style="width:1020px;height:144px;background-image:url('{GFX_Dir}/header.jpg');"></div>
 <div style="width:1020px;height:71px;background-image:url('{GFX_Dir}/navigation_bg.jpg');margin-top:10px" id="Navi">
  <ul>[*][/list] </div>
 

 {Content}
</body>
</html>
und hier die style.css:
Code:
#Navi ul
{
 width:1020px;
 height:71px;
 /* oben rechts unten links*/
 padding: 14px 0px 0px 54px;
 list-style-type: none;
 height:57px;
}

#Navi ul li
{
 padding: 0px 0px 0px 0px;
 display: inline;
}

#Navi #home
{
 width:82px;
 height:43px;
 display:block;
 background-image:url(./source/navi/home1.jpg);

}
#Navi #home:hover
{ background-image:url(./source/navi/home2.jpg); }

#Navi #news
{
 background-image:url(./source/navi/news1.jpg);
 width:82px;
 height:43px;
}
#Navi #news:hover
{ background-image:url(./source/navi/news2.jpg); }
Danke fricca, der Link zu collapsing margins hat mir weitergeholfen
ein big thX von mir ^^ :P
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bilder in einem <div> ausrichten trequ CSS 12 29.05.2007 11:00
Bild vertikal zentriert in einem <div> ausrichten wolfgke CSS 3 07.09.2006 16:12
<img> in <div> ausrichten D3mOn CSS 2 17.03.2005 11:31
Text ausrichten in einem <div> arkanis CSS 2 27.09.2004 14:57
<div> container ausrichten. IE6 u. Mozilla1.6 scan CSS 3 04.03.2004 13:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:45 Uhr.