Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 24-09-2006, 08:12   #1 (permalink)
tracer
 
Benutzerbild von andretti
 
Registriert seit: Jun 2004
Beiträge: 4.412
<li>-link mit hintergrundbild- text unten ausrichten

aloha, liebe Liebenden!

ich habe 7 <-li>- links, nebeneinander ausgerichtet, mit einem jeweils individuellem hintergrundbild, welches bei hover und active die farbe ändert;
desweiteren braucht man ja auch einen text für den link;
habe es so geplant, dass das hg-bild 100 px hoch ist( also die <li>- eigenschaft auch auf 100 px gesetzt), aber das eigentliche bild nur 80 px hoch ist, der rest, die unteren 20 px bleiben weiß; wie kann ich den linktext unten ausrichten?
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
body{
	height:100%;
	display: inline;
	margin: 0;
	padding: 0;
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	/*background-image: url(pics/stripes.jpg);*/
}
a{
	color: #99CC33;
	text-decoration: none;
	font-weight: bold;
}
a:hover{
	color: #9966CC;
	text-decoration: underline;
}

#overall_container{
	position: absolute;
	width: 690px;
	height:auto;
	top: 0;
	left: 50%;
	margin-left: -345px;
	background-color: #99CC33;
	text-align:center;
	border: 1px ridge #333333;
}
#container{
width:680px;
background-color:#FFFFFF;
margin:5px;
text-align:center;
}
#header{
	height: 75px;
	margin:0;
}

#header img{
border:none;
}
#linkrow
{
    width:680px;
	height: 100px;
	margin: 10px 0 0 0;
	text-align:left;
}
*>#linkrow{
    width: 680px;
	height: 20px;
	margin: 10px 0 0 0;
	text-align:left;
}
#linkliste {
    list-style-type: none;
    text-align:left;
    margin: 0;
    padding: 0;
}
#linkliste li {
	float: left;
	margin-left: 13px;
	list-style-type: none;
}
#linkliste li a,
.active1, .active2, .active3, .active4, .active5, .active6,  .active7
{
	display: block;
	height: 100px;
	width: 80px;
	text-align: center;
	text-decoration: none;
	color: #99CC33;
	font-weight:normal;
	border: 1px solid #9966CC;
	
}

#linkliste li a
{
	border: 1px solid #9966CC;
			
}
#linkliste li a:hover
{
	color: #9966CC;
	
}


.active1{background-image:url(pics/eva_sw.jpg);background-repeat:no-repeat;}
.active2{background-image:url(pics/krise_sw.jpg);background-repeat:no-repeat;}
.active3{background-image:url(pics/drug_sw.jpg);background-repeat:no-repeat;}
.active4{background-image:url(pics/force_sw.jpg);background-repeat:no-repeat;}
.active5{background-image:url(pics/diagnostic_sw.jpg);background-repeat:no-repeat;}
.active6{background-image:url(pics/bach_sw.jpg);background-repeat:no-repeat;}
.active7{background-image:url(pics/contact_sw.jpg);background-repeat:no-repeat;}

.pn1 a{background-image:url(pics/eva1.jpg);background-repeat:no-repeat;}
.pn2 a {background-image:url(pics/krise1.jpg);background-repeat:no-repeat;}
.pn3 a {background-image:url(pics/drug1.jpg);background-repeat:no-repeat;}
.pn4 a {background-image:url(pics/force1.jpg);background-repeat:no-repeat;}
.pn5 a {background-image:url(pics/diagnostic1.jpg);background-repeat:no-repeat;}
.pn6 a {background-image:url(pics/bach1.jpg);background-repeat:no-repeat;} 
.pn7 a {background-image:url(pics/contact1.jpg);background-repeat:no-repeat;} 


.pn1 a:hover{background-image:url(pics/eva2.jpg);background-repeat:no-repeat;}
.pn2 a:hover {background-image:url(pics/krise2.jpg);background-repeat:no-repeat;}
.pn3 a:hover {background-image:url(pics/drug2.jpg);background-repeat:no-repeat;}
.pn4 a:hover {background-image:url(pics/force2.jpg);background-repeat:no-repeat;}
.pn5 a:hover {background-image:url(pics/diagnostic2.jpg);background-repeat:no-repeat;}
.pn6 a:hover {background-image:url(pics/bach2.jpg);background-repeat:no-repeat;}
.pn7 a:hover {background-image:url(pics/contact2.jpg);background-repeat:no-repeat;}


#content{
	margin: 0;
	height: 400px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-align:left;
}
*>#content {
	min-height: 400px;
	height: auto;
}
#content h3{
	color: #CC7700;
	font-size:14px;
	font-variant: small-caps;
	font-weight: bold;
	margin-top:-1px;
}
.back{
text-align:right;
border:none !important;
}
#content h4{
color: #99CC00;
font-size:11px;
}
#content h5{
	color: #CC7700;
	font-size:13px;
	font-weight: bold;
	text-transform: lowercase;
}
#content h6{
	color: #000000;
	font-size:12px;
	font-weight: bold;
}
#content li{
	color: #CC7700;
	list-style-type: square;
	list-style-position: outside;
}
#content li a{
   	color: #99CC00 !important;
	text-decoration: none !important;
	font-weight: normal !important;
}
#content li a:hover{
	color: #CC7700 !important;
}
.inside{
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

#imgcontainer {
	float: left;
	width: 295px;
	height:150px;
	padding:5px;
	text-align:left;
}

img {
	border: 1px solid #CC7700;
}
.imgnoframe{border: none !important;
}
.clearing{
clear: both;
}
textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-align: left;
	vertical-align: text-top;
	border: 1px solid #CC7700;
	
}
input {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	vertical-align: text-top;
	border: 1px solid #CC7700;
	height: 16px;
}
.submit {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	color: #FFFFFF;
	background-color: #CC7700;
}
form {
	text-align: left;
	width: 325px;
}
#kontaktdaten {
	float: right;
	height: 100px;
	width: 260px;
	padding-top:20px;
}

#flashbox{
	width:110px;
}
</style>
<head>

</head>

<body>

<div id="overall_container">
<div id="container">
<div id="header"><img src="pics/tutnichtszursache.jpg" alt="Header- Geist und Seele" width="680" height="80" /></div>
<div id="linkrow">
			<ul id="linkliste">
				<li class="active1">&Uuml;ber mich</li>
				<li class="pn2"><a href="sellingergasse7.html" title="Das Haus und seine Mieter" target="_self">Lebenskrisen</a></li>
				<li class="pn3"><a href="news.html" title="Neuigkeiten" target="_self">Emotionales</a></li>
				<li class="pn4"><a href="events.html" title="Erlebtes und Geplantes" target="_self">Gewalt</a></li>
				<li class="pn5"><a href="gb/guestbook.php" title="Plaudern, tratschen, raunzen, austauschen, schimpfen, freuen..." target="_self">Diagnostik</a></li>
				<li class="pn6"><a href="kontakt.html" title="" target="_self">Bachbl&uuml;ten</a></li>
				<li class="pn7"><a href="kontakt.html" title="" target="_self">Kontakt</a></li>
			</ul>
  </div>
<div id="content">
			<div id="imgcontainer">
				<img src="" alt="" width="" height=""><br />
	  </div>
			<h3></h3>
			  <p></p>

<div class="clearing"></div>
			<div id="flashbox"><script type="text/javascript">
		// <![CDATA[		
		var so = new SWFObject("counter.swf", "counter", "70", "31", "8", "#FFFFFF");
		so.addParam("menu", "false");
		so.write("flashbox");
		// ]]>
	</script>
	</div>
    </div>
  
  </div>
</div>

</body>
</html>
__________________
Viola per Sempre
Alle Angaben ohne Gewehr!
trace your open mind in variables !
andretti
ActionScript Dictionary
andretti ist offline   Mit Zitat antworten
Alt 24-09-2006, 09:24   #2 (permalink)
Neuer User
 
Registriert seit: Jun 2004
Beiträge: 780
Kannst du das mal hochladen, so dass man das Problem mal live sehen kann?

Dann sag ich dir die Lösung^^
Noir0x ist offline   Mit Zitat antworten
Alt 24-09-2006, 09:29   #3 (permalink)
pixel prostitute
 
Benutzerbild von bishop
 
Registriert seit: Mar 2004
Ort: berlin
Beiträge: 8.423
Imho geht das ganze nur mittels padding- und margin-Geschubse. Ein vertical-align greift hier z.B. nicht. Lasse mich aber gern eines besseren belehren… bin ja auch lernwillig.
__________________
:: Bilder hochladen, Lizenzfreie Bilder günstig kaufen, Webdesign, Passwort Generator ::
currently listen: reaper - totengräber 07 // nachtmahr - nachtmahr // grendel - hate this // nurzery rhymes - coroner // panic lift - everything i have
bishop ist offline   Mit Zitat antworten
Alt 24-09-2006, 09:52   #4 (permalink)
mod_rewrite
 
Benutzerbild von sonar
 
Registriert seit: Feb 2003
Ort: München
Beiträge: 15.750
Gib den <li>'s ein position: relative und den <a>'s darin ein position: absolute mit bottom: 0
Sollte gehen... (wenn ich's nicht missverstanden hab...)

Hi büschopp!
__________________
RTFM
Wie man Fragen richtig stellt.

Money makes the world go round, fear makes it turn much faster.
(New Model Army)
sonar ist gerade online   Mit Zitat antworten
Alt 24-09-2006, 14:13   #5 (permalink)
pixel prostitute
 
Benutzerbild von bishop
 
Registriert seit: Mar 2004
Ort: berlin
Beiträge: 8.423
Zitat:
Zitat von sonar Beitrag anzeigen
Gib den <li>'s ein position: relative und den <a>'s darin ein position: absolute mit bottom: 0
Sollte gehen... (wenn ich's nicht missverstanden hab...)

Hi büschopp!
Ha, tricky (noch nicht probiert)!
Hi mod_rewrite
__________________
:: Bilder hochladen, Lizenzfreie Bilder günstig kaufen, Webdesign, Passwort Generator ::
currently listen: reaper - totengräber 07 // nachtmahr - nachtmahr // grendel - hate this // nurzery rhymes - coroner // panic lift - everything i have
bishop ist offline   Mit Zitat antworten
Alt 24-09-2006, 18:35   #6 (permalink)
tracer
 
Benutzerbild von andretti
 
Registriert seit: Jun 2004
Beiträge: 4.412
Zitat:
Zitat von sonar Beitrag anzeigen
Gib den <li>'s ein position: relative und den <a>'s darin ein position: absolute mit bottom: 0
Sollte gehen... (wenn ich's nicht missverstanden hab...)

Hi büschopp!
huhu!
öhm, nö des isch nix....
hier mal ein bsp
__________________
Viola per Sempre
Alle Angaben ohne Gewehr!
trace your open mind in variables !
andretti
ActionScript Dictionary
andretti ist offline   Mit Zitat antworten
Alt 24-09-2006, 18:47   #7 (permalink)
tracer
 
Benutzerbild von andretti
 
Registriert seit: Jun 2004
Beiträge: 4.412
ich könnt natürlich den linktext ins img einbauen, aber ich wollt den search-engines was zum fressen geben......
hach...
__________________
Viola per Sempre
Alle Angaben ohne Gewehr!
trace your open mind in variables !
andretti
ActionScript Dictionary
andretti ist offline   Mit Zitat antworten
Alt 24-09-2006, 19:10   #8 (permalink)
licence to chill
 
Benutzerbild von nic-man
 
Registriert seit: Sep 2005
Ort: B*A*S*E*L
Beiträge: 290
du musst da was falsch gemacht haben....

guck mal hier

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
ul {
list-style:none;
margin:0;
padding:0;
}

li {
height:50px;
width:100px;
position:relative;
background-color:#666666;
}

li a {
position:absolute;
bottom:0;
}
-->
</style>
</head>

<body>
<ul>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>
nic-man ist offline   Mit Zitat antworten
Alt 24-09-2006, 19:17   #9 (permalink)
tracer
 
Benutzerbild von andretti
 
Registriert seit: Jun 2004
Beiträge: 4.412
css:
HTML-Code:
#linkliste li p{
margin-top:80px;
}
im body:
HTML-Code:
<li class="pn2"><a href="lebenskrisen.html" title="Das Haus und seine Mieter" target="_self"><p>Lebenskrisen</p></a></li>
__________________
Viola per Sempre
Alle Angaben ohne Gewehr!
trace your open mind in variables !
andretti
ActionScript Dictionary
andretti ist offline   Mit Zitat antworten
Alt 24-09-2006, 19:22   #10 (permalink)
licence to chill
 
Benutzerbild von nic-man
 
Registriert seit: Sep 2005
Ort: B*A*S*E*L
Beiträge: 290
geht auch... ist aber unflexibler
nic-man ist offline   Mit Zitat antworten
Alt 24-09-2006, 20:46   #11 (permalink)
pixel prostitute
 
Benutzerbild von bishop
 
Registriert seit: Mar 2004
Ort: berlin
Beiträge: 8.423
Geht nicht, denn ein paragraph hat nichts innerhalb eines anchor zu suchen. In einem Listenelement imho auch nicht.
__________________
:: Bilder hochladen, Lizenzfreie Bilder günstig kaufen, Webdesign, Passwort Generator ::
currently listen: reaper - totengräber 07 // nachtmahr - nachtmahr // grendel - hate this // nurzery rhymes - coroner // panic lift - everything i have
bishop ist offline   Mit Zitat antworten
Alt 24-09-2006, 21:05   #12 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
na dann halt span
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 24-09-2006, 21:15   #13 (permalink)
tracer
 
Benutzerbild von andretti
 
Registriert seit: Jun 2004
Beiträge: 4.412
ähm, mit span, wie sollte des dann ausschauen?
mit <p> geht des sooo schön(in allen brausen... ), invalide is es halt...pfffff
__________________
Viola per Sempre
Alle Angaben ohne Gewehr!
trace your open mind in variables !
andretti
ActionScript Dictionary
andretti ist offline   Mit Zitat antworten
Alt 24-09-2006, 21:25   #14 (permalink)
·
 
Benutzerbild von pilzebub
 
Registriert seit: Oct 2003
Ort: ··
Beiträge: 746
schonmal mit line-height:80px probiert
pilzebub ist offline   Mit Zitat antworten
Alt 24-09-2006, 21:31   #15 (permalink)
tracer
 
Benutzerbild von andretti
 
Registriert seit: Jun 2004
Beiträge: 4.412
in welchen tag?
im li oder li a ist der text dann fast vertikal zentriert innerhalb der 80px höhe;
__________________
Viola per Sempre
Alle Angaben ohne Gewehr!
trace your open mind in variables !
andretti
ActionScript Dictionary
andretti ist offline   Mit Zitat antworten
Antwort

Lesezeichen

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 sind an
Pingbacks sind an
Refbacks sind an



Alle Zeitangaben in WEZ +1. Es ist jetzt 16:09 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele