zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafik richtig positionieren?!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.06.2007, 13:24
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard Grafik richtig positionieren?!

hallo,

ich möchte über dem logo drei grafiken richtig positionieren. doch das will mir nicht richtig gelingen.

Wie muss ich das richtig angehen? alle drei sollen sich auf einer ebene befinden und die grafik "in_navigation_2" und "_3.jpg" sollen links und rechts über der hintergrundgrafik "in_navigation_1.jpg" liegen, die sich über die gesamte breite erstreckt.

Ich hab noch eine grafik angehängt.

css
Code:
#head3 ul {
	font-size:small;
	text-align:center;
	list-style:none;
	height:34px;
	background:#000 url(ln_navigation_1.jpg) repeat-x;
}

#head3 ul li {
	display:inline;
}

#head3 ul li a {
	font-size:1.1em;
	margin-left:20px;
	padding-right:20px;
}

a.head3:link, a.head3:visited, a.head3:active, a.head3:hover {
	color:#eee;
	text-decoration:none;
}

a.head3:hover {
	color:#c00;
}

.t2 {
	float:right;
	height:34px;
	width:11px;
	background:#000 url(ln_navigation_2.jpg) no-repeat;
}

.t3 {
	float:left;
	height:34px;
	width:11px;
	background:#000 url(ln_navigation_3.jpg) no-repeat;
}
html
Code:
<body>
<div id="wrap">

<div class="t3"></div>

<div id="head3">
	<ul class="navilist">
		<li><a class="head3" href="#.html">link us</a></li>
		<li><a class="head3" href="#.html">contact</a></li>
		<li><a class="head3" href="#.html">team</a></li>
		<li><a class="head3" href="#.html">impressum</a></li>
	</ul>
</div> <!-- head3 end -->


<div class="t2"></div>
<div id="head">

</div> <!-- head end -->



<div id="sidebar">
Angehängte Grafiken
Dateityp: jpg bla.jpg (28,9 KB, 11x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.06.2007, 13:33
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Die Grafiken sollten nebeneinander floaten und dann einen clear bekommen, damit der andere Inhalt wieder drunter weiter geht.

Kannst du das online stellen bzw. den ganzen Code posten, mit den Fetzen kann man nicht so viel anfangen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.06.2007, 20:26
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

danke für deine antwort. ich habs hier online gestellt:

100% Metal | www.metal4life.net

css
Code:
body {
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
	font-size:medium;
	color:#fff;
	background:#000 url(bg.jpg) repeat-x;
}

#wrap {
	margin:auto;
	width:660px;
	min-height:100%;
	text-align:left;
	padding-top:1px;
	background:#25282a url(wrap_bg.jpg) repeat-y;
}

#head {
	height:148px;
	width:660px;
	background:#000 url(logo.jpg) no-repeat;
}

#head3 ul {
	font-size:small;
	text-align:center;
	list-style:none;
	height:34px;
	background:#000 url(ln_navigation_1.jpg) repeat-x;
}

#head3 ul li {
	display:inline;
}

#head3 ul li a {
	font-size:1.1em;
	margin-left:20px;
	padding-right:20px;
}

a.head3:link, a.head3:visited, a.head3:active, a.head3:hover {
	color:#eee;
	text-decoration:none;
}

a.head3:hover {
	color:#c00;
}

#sidebar {
	float:left;
	font-size:large;
	width:200px;
	background:#25282a url(sidebar_bg.jpg) repeat-y;
}

#menu1 a, #menu1 a:visited, #menu1 a:active {
	display:block;
	background:#;
	color:#93A5A9;
	font:normal 12px verdana, sans-serif;
	text-decoration:none ;
	text-align:center;
	width:160px;
	border-bottom:solid 1px #313131;
	font-size:89%;line-height: 180%;
	font-family:"Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
}

#menu1 a:hover{
	background:#262626;
	color:#fff;
	text-decoration:none ;
}

#content_wrap {
	float:right;
	width:440px;
	background:#25282a url(content_bg.jpg) repeat-y;
}

#content {
	margin:10px 20px 10px 0;
	text-align:justify;
}

#footer {
	text-align:center;
	font-size:small;
	min-height:100%;
	padding:5px;
	color:#000;
	background:#e8e8e8 url(footer_bg.jpg) repeat-y;
	clear:both;
}

.footer_logo {
	margin-left:250px;
	height:25px;
	width:163px;
	background:#e8e8e8 url(footer_logo.jpg) no-repeat;
}



.t1 {
	height:34px;
	background:#000 url(ln_navigation_1.jpg) repeat-x;
}

.t2 {
	float:right;
	height:34px;
	width:11px;
	background:#000 url(ln_navigation_2.jpg) no-repeat;
}

.t3 {
	float:left;
	height:34px;
	width:11px;
	background:#000 url(ln_navigation_3.jpg) no-repeat;
}
html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>100% Metal | www.metal4life.net</title>
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<script>
function swap_content( span ) {
displayType = ( document.getElementById( span ).style.display == 'none' ) ? 'block' : 'none';
document.getElementById( span ).style.display = displayType;
}
</script>
</head>
<body>
<div id="wrap">
<div class="t3"></div>

<div id="head3">
	<ul class="navilist">
		<li><a class="head3" href="#.html">link us</a></li>
		<li><a class="head3" href="#.html">contact</a></li>
		<li><a class="head3" href="#.html">team</a></li>
		<li><a class="head3" href="#.html">impressum</a></li>
	</ul>
</div> <!-- head3 end -->

<div class="t2"></div>
<div id="head">

</div> <!-- head end -->



<div id="sidebar">

<table     align="center"  id="menu1"  border="0" cellpadding="0" cellspacing="0"   >
<tr>
<td >
<a href="index.php?content=main"  onfocus="this.blur()">&nbsp;&nbsp;Home</a></td>

</tr>
<tr>
<td >
<a href="index.php?content=news"  onfocus="this.blur()">&nbsp;&nbsp;Forum</a></td>
</tr>
<tr>
<td >
<a href="index.php?content=history" onfocus="this.blur()">&nbsp;&nbsp;#</a></td>
</tr>
<tr>
<td >
<a href="#" onMouseOver="swap_content('klappe'); return false;" onklick="swap_content('klappe'); return false;"  

onfocus="this.blur()">&nbsp;&nbsp;##</a>
	<span id="klappe" style="display: none"><a href=index.php?content=pupTD><font color=yellow>#</a>

	<a href=index.php?content=pupJB><font color=yellow>#</a>
	<a href=index.php?content=pupKG><font color=yellow>#</a></span>	

</td>
</tr>
<tr>
<td >
<a href="index.php?content=lyrics"  onfocus="this.blur()">&nbsp;&nbsp;#</a></td>
</tr><tr>
<td >
<a href="#" onMouseOver="swap_content('klappe2'); return false;" onklick="swap_content('klappe2'); return false;" 

onfocus="this.blur()">&nbsp;&nbsp;##</a>
<span id="klappe2" style="display: none">

<a href=index.php?content=videos><font color=yellow>#</a>
<a href=index.php?content=videot><font color=yellow>#</a></span>


</td>
</tr>
<tr>
<td >
<a href="#" onMouseOver="swap_content('klappe3'); return false;" onklick="swap_content('klappe3'); return false;" 

onfocus="this.blur()">&nbsp;&nbsp;##</a>
<span id="klappe3" style="display: none">
<a href=index.php?content=JB><font color=yellow>#</a>
<a href=index.php?content=><font color=yellow>#</a></span>

</td>
</tr>
<tr><td>
</td>

</tr>

</table>

</div> <!-- sidebar end -->



<div id="content_wrap">
<div id="content">
<p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 

Bla Bla Bla Bla Bla Bla Bla </p>
</div> <!-- content end -->
</div> <!-- content_wrap end -->
<div id="footer">
<div class="footer_logo"></div>
</div> <!-- footer -->
</div> <!-- wrap -->
</body>
</html>
Mit Zitat antworten
  #4 (permalink)  
Alt 13.06.2007, 20:31
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

wieso verwendest du nicht eine große Grafik?

@Problem:
Die kleinen Grafiken haben einfach einen Platz dort zu sein, wo du sie gerne hättest! Da ist diese große Grafik im Weg!
Weil sich "head3 ul" über die gesamte Breite legt, floaten Elemente brauchen eine Breite.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ

Geändert von Crizzo (13.06.2007 um 20:36 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.06.2007, 21:12
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

danke für die antwort.

ich hab nun eine grafik daraus gemacht.

Geändert von Pumpkin (13.06.2007 um 22:01 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 13.06.2007, 21:41
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

gibt den li-Elementen einen margin-left und right.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 13.06.2007, 22:06
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 791
kadees wird schon bald berühmt werden
Standard

Hi,
ohne dass ich jetzt Quelltext (HTML/CSS) überprüft habe fällt mir folgendes auf:
a)Beim hovern über die Links (##) auf der linken Seite werden im IE7 und Opera9 neue "Untermenüs" eingeblendet, im FireFox2 tut sich da nix.
b)Im IE7 erscheint bei mir mitten im Content ein Drop-Down-Menü (das da IMHO nicht reingehört), nicht jedoch im FireFox und Opera.

Edit:
Sehe gerade, dass du die Seite geändert hast!
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS

Geändert von kadees (13.06.2007 um 22:21 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 13.06.2007, 22:43
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

Ja, da hatte ich etwas experimentiert. Ich hab das schon inzwischen alles entfernt.
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
2 DIVS richtig positionieren Pari CSS 0 13.06.2009 20:22
Menuinhalt richtig positionieren Pari CSS 3 03.01.2009 16:11
Grafik links unten positionieren UND Text rechts umfließen Worance CSS 3 02.06.2008 22:29
mit Link hinterlegte Grafik in Tabellenzelle absolut positionieren... jhartlep CSS 0 01.11.2007 13:46
Grafik innerhalb eines Layers positionieren rothom CSS 3 07.06.2004 11:19


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