Antworten auf deine Fragen:
Neues Thema erstellen

CSS Problem

Q

qazwsx

Nicht mehr ganz neu hier

Hallo!

Ich hoffe, dass ihr mir auch diesmal helfen könnts! Habe einen Header mit einer dursichtigen Stelle. Dort soll eine Navi hin. Hatte es mit CSS Margin top und left ausgerichtet und in der html Datei die Header div vor der Navi div gelegt. Antuerlich kann die Navi nicht benutzt werden, denn das Headerbild ist ja davor. Wenn ich die div vertausche, ist die Navi [ber den Header und drueckt ihn runter. Hier der CSS Code:
Code: 
#logo {
display : block;
width : 1295px;
height : 234px;
text-indent : -5000px;
position : relative;
margin-top : -15px;
margin-left : -60px;
}
#logo:hover {
text-decoration : none;
}
#submenu {
background : url("{T_THEME_PATH}/images/link_home2.png") no-repeat 0 0;
width : 755px;
height : 55px;
margin-top : 105px;
margin-left : 477px;
}
#submenu a {
margin-top : 10px;
}

und so habe ich es eingefuegt:
Code: 
	<div style="clear: both;"></div>
    <div id="submenu">
			<a href="portal.php" class="sitehome" title="{L_HOME}">{L_HOME}</a>
			<a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a>
			<a href="live.php" class="icon-faq" title="LIVE!">LIVE!</a>
	</div>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span style="display: block; height: 5px;"><span></span></span>
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{L_INDEX}</a>
			</div>
		<div class="navbar">
			<ul>
			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
				<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a></li>
				<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
				<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
				<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
			<!-- ENDIF -->
			<!-- IF not S_IS_BOT -->
				<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
				<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
				<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
			<!-- ENDIF -->
			</ul>			
		</div>
                    	
			<span style="clear: both; display: block; height: 5px;"><span></span></span></div>

		</div>

und:
Code: 
	<div style="clear: both;"></div>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span style="display: block; height: 5px;"><span></span></span>
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{L_INDEX}</a>
			</div>
		<div class="navbar">
			<ul>
			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
				<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a></li>
				<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
				<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
				<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
			<!-- ENDIF -->
			<!-- IF not S_IS_BOT -->
				<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
				<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
				<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
			<!-- ENDIF -->
			</ul>			
		</div>
                    	<div id="submenu">
			<a href="portal.php" class="sitehome" title="{L_HOME}">{L_HOME}</a>
			<a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a>
			<a href="live.php" class="icon-faq" title="LIVE!">LIVE!</a>
	</div>
			<span style="clear: both; display: block; height: 5px;"><span></span></span></div>

		</div>

Wer kann helfen?

Danke!!!
 

cebito

cebito

undefined

AW: CSS Problem

Ich seh in deinem css-Schnipsel nichts von den relevanten Sachen, und ein Link oder zumindest ein Screenshot wo auf das Problem aufmerksam gemacht wird wären auch hilfreich.
 
sokie

sokie

Mod | Web

AW: CSS Problem

da wirst du in dem Fall die navigation absolut positionieren müssen.
Code: 
#submenu {
background : url("{T_THEME_PATH}/images/link_home2.png") no-repeat 0 0;
width : 755px;
height : 55px;
position: absolute;
top : 105px;
left : 477px;
}

der umgebende container sollte dann position: relative; haben
 
M

Messiahs

Aktives Mitglied

AW: CSS Problem

Ich denke mal das du deinen Header in einer div Box hast , lade einfach deinen Header als background-image rein und schon klappts auch mit der Navi :)

Eine andere Alternative ist wenn du deine navi in so einer div box rein packst

<div style="position:absolute; top:180px; left:96px; width:677px; height:440px;">DEINE NAVI</div>

Mfg
 
K

kleinerOnkel

Nicht mehr ganz neu hier

AW: CSS Problem

bitte ein screenshot, von dem wie es gerade aussieht und was Du anders haben willst. nur css reicht da nicht. Und vielleicht hilft Dir ja das Schlagwort Box-Model etwas. Man kann ja auch floaten.
 
Q

qazwsx

Nicht mehr ganz neu hier

AW: CSS Problem

Also!

Erstmal danke fuer die zahlreichen Antworten, ihr seid wirklich Klasse! Habe mir das Prinzip nochmal durch den Kopf gehen lassen und gedacht, wie ich die Navi am besten erstellen kann. Habe nun diese Idee:

Der Navi-Hintergrund steht hinter dem Header. Um die Navi benutzbar zu machen, durchsichtige Kaestchen vor den Navi Buttons. Natuerlich klappt dies nicht so richtig. Die Kaestchen erscheinen zwar vor der Navi, jedoch hinter dem Headerbild, auf welchem die transparente Flaeche ist. Ich klicke also auf das Headerbild und nicht auf das Kaestchen. Hier der Link (ACHTUNG, Baustelle!), habe das dursichtige Kaestchen durch ein weisses ersetzt, damit ihr sieht, wo es sich befindet, hier nun erst CSS, dann HTML und dann der Link:

CSS:
Code: 
#xxx {
background : url("{T_THEME_PATH}/images/xxx.png") no-repeat 0 0;
width : 192px;
height : 107px;
position: absolute;
top : 105px;
left : 582px;
}
#logo {
display : block;
width : 1300px;
height : 234px;
text-indent : -5000px;
position : relative;
margin-top : -6px;
margin-left : -27px;
}
#logo:hover {
text-decoration : none;
}
#submenu {
background : url("{T_THEME_PATH}/images/link_home2.png") no-repeat 0 0;
width : 755px;
height : 55px;
margin-top : 115px;
margin-left : 510px;
}

HTML:
Code: 
<div id="xxx"></div>

<body id="site" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>

	<div style="clear: both;"></div>
	<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span style="display: block; height: 5px;"><span></span></span>
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{L_INDEX}</a>
			</div>

                    	<div id="submenu"></div>
			<span style="clear: both; display: block; height: 5px;"><span></span></span></div>

		</div>

	
	</div>


Hier gehts lang:

(ACHTUNG Baustelle!)

Waere echt toll, wenn ihr mir helfen koenntets!

mfG!
 
L

leohh

CSS verliebt

AW: CSS Problem

Frage vorab: Steckt da ein CMS dahinter, lohnt es sich ueberhaupt auf die strukturelen Schwaechen einzugehen -bzw. bist du da so fit, dass du das selbstaendig so abaendern kannst, wie man es dir hier vorschlaegt.

Du meinst doch sicher diesen Bereich, der mit den teilweise verblassten Bildern hinterlegt ist und Forum, Halendarz, Rezultati, ? steht.. wenn ich das richtig verstanden habe
 
Q

qazwsx

Nicht mehr ganz neu hier

AW: CSS Problem

leohh schrieb:
Frage vorab: Steckt da ein CMS dahinter, lohnt es sich ueberhaupt auf die strukturelen Schwaechen einzugehen -bzw. bist du da so fit, dass du das selbstaendig so abaendern kannst, wie man es dir hier vorschlaegt.

Du meinst doch sicher diesen Bereich, der mit den teilweise verblassten Bildern hinterlegt ist und Forum, Halendarz, Rezultati, ? steht.. wenn ich das richtig verstanden habe
Zum Vergrößern anklicken....

Klar, ich wuerde keine Website programmieren, wenn ich davon nichts verstehen wuerde, habe auch viele Websites bereits programmiert, nur hier stosse ich an meine Grenzen, denn an soetwas hatte ich mich bisher nicht gewagt, also mit der Anordnung, was vor was stehen soll.

Ja, du meinst den richtigen Bereich. Es ist ein CMS, aber wird es nicht sein, wenn die Seite fertig sein wird. Hatte es nur einfacher, es dort zu erstellen, dannach wird der Header wahrscheinlcih eine Typo3 Newsseite schmuecken.

Fuer den Header verwende ich keine CMS spezifischen Sachen, z.B. Links, denn dieses wird ja nicht verwendet.

Waere echt toll, wenn ihr mir helfen koenntets. Ihr seht doch dieses eine Kaestchen, links neben "Forums", dieses soll vor dem Headerbild, denn wird ein dursichtiges, welcher verlinkt sein wird.

Danke euch!
 
L

leohh

CSS verliebt

AW: CSS Problem

Leg dir doch bitte erstmal eine vernuenftige Strukturierung zu.
Das bedeutet, dass du deine Elemente auszeichnest und zwar nicht nach Kraut und Ruebenmanier alles mal in einen Div und alles andere kommt in ein span-Tag und den klaeglichen Rest verpack ich in ein Tabellenlayout. Aber gut auf diesen Teil geh ich dann auch nicht weiter ein, sonst koennte mir die Hutschnur platzen.

HTML: 
<div class="headerbar">
              <div class="inner"><span style="display: block; height: 5px;"><span></span></span>
                 <div id="site-description">
                    <a href="./?style=16" title="Foruma saturs" id="logo">Foruma saturs</a>
                 </div>

                 <div id="submenu">
                    <a href="http://www.lvhokejs.lv/portal.php" class="sitehome" title="Sākums">Sākums</a>
                    <a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="Mainīt burtu izmēru">Mainīt burtu izmēru</a>
                    <a href="live.php" class="icon-faq" title="LIVE!">LIVE!</a>
	         </div>
                 <span style="clear: both; display: block; height: 5px;"><span></span></span></div>

              </div>
              
	   </div>
Wenn ich das richtig sehe, geht es sich um diesen Bereich.
Schmeiss alles raus bzw. setz es noch mal neu auf. Das ganze koennte, je nach Umfang und ausmass deiner slices und wichtigen Posten so aussehen:
HTML: 
<div id="page-header">
   <h1><a href="#" title="Logo"><!-- Seitentitel --></a></h1>
   <!-- Weitere Schmuckgrafiken in sinnvoll, vertretbaren Tags! -->
      
   <ul id="submenu">
      <li><a href="http://www.lvhokejs.lv/portal.php" title="Sākums">Sākums</a></li>
      <li><a href="#" title="Mainīt burtu izmēru">Mainīt burtu izmēru</a></li>
      <li><a href="live.php" class="icon-faq" title="LIVE!">LIVE!</a></li>

   </ul>
   <!-- endSub -->

   <br class="clearfix" />   

</div>
<!--- endPage-Header -->
Deine Grafiken sowohl den normalen-Stutus als auch die uebrigen, hover und visitded waeren zwei wichtige packst du in eine Grafik rein und schiebst sie an die entsprechenden Positionen. Du setzt dich am besten hin und befragst deinen Suchanbieter deines Vertrauens oder das Board selber nach dem sog. Sprites-Verfahren. Das scheint mir hier am Sinnvollsten. Rollovers mittels Sprites-Technik.

Und ganz ehrlich, hoffe ich instaendig, dass du fuer deine anderen Arbeiten nicht noch entgeldlich honoriert wurdest, denn sowas ist Codevergewaltigung nichts weiter ;). Entschuldige fuer die Ehrlichen Worte. Viel Erfolg
 
Zuletzt bearbeitet:
I

infernalshade

Noch nicht viel geschrieben

AW: CSS Problem

Also auf Anhieb würde ich das so lösen:

HTML: 
<div id="page-header">                             // Dieser div is außen rum. CSS: position:relative;
     <div id="header"></div>                       // Das ist der div in dem die Kopfgrafik liegt (optimalerweise im Hintergrund). CSS: position:absolute; z-index:1
     <div id="navi">*hier dein navi*</div>     // Das ist der div für dein navi. CSS: position:absolute; z-index:2;
</div>

Aber wie schon oben gesagt, bissl auf die Struktur achten ;)


Grüße,
infernalshade
 
Q

qazwsx

Nicht mehr ganz neu hier

AW: CSS Problem

infernalshade schrieb:
Also auf Anhieb würde ich das so lösen:

HTML: 
<div id="page-header">                             // Dieser div is außen rum. CSS: position:relative;
     <div id="header"></div>                       // Das ist der div in dem die Kopfgrafik liegt (optimalerweise im Hintergrund). CSS: position:absolute; z-index:1
     <div id="navi">*hier dein navi*</div>     // Das ist der div für dein navi. CSS: position:absolute; z-index:2;
</div>

Aber wie schon oben gesagt, bissl auf die Struktur achten ;)


Grüße,
infernalshade
Zum Vergrößern anklicken....

Danke!

Du hast mich auf die Idee mit dem z-index gebracht!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 106 (Mitglieder: 0, Gäste: 106)
Robots: 160

Statistik des Forums

Themen
118.642
Beiträge
1.538.514
Mitglieder
67.559
Neuestes Mitglied
Andi Schäfer
Oben