zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Rahmen aus IMGs um einen Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.10.2010, 12:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2010
Beiträge: 2
Vadril befindet sich auf einem aufstrebenden Ast
Frage Problem mit Rahmen aus IMGs um einen Container

Guten Morgen,

ich habe versucht eine Seite zu "verschönern", indem ich um die Textcontainer Rahmen ziehe. Dafür habe ich die passenden Bilder zusammengesucht, allerdings scheitere ich daran, auf der linken und rechten Seite den Rahmen anzeigen zu lassen.

GermanWoW - Die Deutsche World of Warcraft Community
(Anmerkung: Es geht um den Rahmen, der bisher nur am Anfang der Box von "Alex aka. Tuxedo" zu sehen ist.)

Der betroffene HTML-Code:
HTML-Code:
<div id="main">
		<div id="top">
			<img src="images/edges/hdr-l.png"/><a name="mark_tuxedo"></a>
			<img src="images/edges/hdr-r.png" style="position:absolute; margin-left: 790px;"/>
		</div>
	<div id="main-l"><div id="main-r">
	<div id="container">
	<img class="avatar" src="images/players/avatar_1.png" alt="Tuxedo" align="left" vspace="0" hspace="5"/>
	<h1> Alex aka. Tuxedo </h1>
	<table border="0" style="table-layout:fixed" cellspacing="10" cellpadding="5">
 		<tr><td style="width:150px;" align="right"><b>Alter:</b></td><td style="width:600px;">Ich machs mal jahresunabh&auml;ngig: Baujahr '82</td>
 		</tr>
 		<tr><td style="width:150px;" align="right"><b>Wohnort:</b> </td><td style="width:600px;">In der N&auml;he von "Am Arsch der Welt", Nachbarst&auml;dte sind Sinsheim, Heidelberg und Heilbronn<img src="images/players/smiley.gif" alt=":)"/></td>
 		</tr>
 		<tr><td style="width:150px;" align="right"><b>Familienstand:</b> </td><td style="width:600px;"> verheiratet, Ledig, keine Kinder</td>
 		</tr>
 		 <tr><td style="width:150px;" align="right"><b>Beruf:</b></td><td style="width:600px;">  Diplom Informatiker (FH)</td>
 		</tr>
 		 <tr><td style="width:150px;" align="right"><b>Studienf&auml;cher:</b></td><td style="width:600px;"> Software Engineering</td>
 		</tr>
 		 <tr><td style="width:150px;" align="right"><b>Hobbies:</b> </td><td style="width:600px;">Computer, Motorrad, Karneval, Server hosten ;)</td>
 		</tr>
 		 <tr><td style="width:150px;" align="right"><b>Musik:</b></td><td style="width:600px;">"Zu alt f&uuml;r Popmusik". Soll heissen: Ne krasse Mischung aus AC/DC, Rammstein, Drum'n'Base und Old-School Rap</td>
 		</tr>
 		 <tr><td style="width:150px;" align="right"><b>Lieblingsessen:</b></td><td style="width:600px;">SchniPoSa, Gyros</td>
 		</tr>
 		<tr><td style="width:150px;" align="right"><b>Was ich gar nicht mag:</b> </td><td style="width:600px;">Ignoranz, Egoismus, Rassismus, Feminismus, und ein paar Dinge mehr</td>
 		</tr>
 		<tr><td style="width:150px;" align="right"><b>Wunschtraum:</b></td><td style="width:600px;">Ein Auto das l&auml;nger als 4 Jahre h&auml;lt</td>
 		</tr>
 		<tr><td style="width:150px;" align="right"><b>Zitat:</b></td><td style="width:600px;">"Am Anfang wurde das Universum erschaffen. Das machte viele Leute sehr w&uuml;tend und wurde allenthalben als Schritt in die falsche Richtung angesehen." - Das Restaurant am Ende des Universums, 1980, ISBN 3-453-14698-0</td>
 		</tr>
 	</table>
 	<div style="margin-left: 120px; margin-right: 120px;"><u><b>&Uuml;ber mich</b></u><br>
WoW Server betreibe ich seit M&auml;rz 2005. Ende 2005 bis Ende 2006 gabs eine Zwangspause (keine gescheite, Linux-taugliche Serversoftware vorhanden).<br> Den Server betreibe ich.. Ja, wieso eigentlich? Naja, es ist wie ein Sport.. Die Herausforderung und Verantwortung reizen eben irgendwie.	 <br></div>
</div>
	</div></div>
<div id="teamborderdown"><img src="images/bg-feat_d.png" alt="BottomBorder"/></div>
</div>
Und hier das CSS dazu:
Code:
body {
	margin: 0;
	color: #FFFFFF;
	background-attachment:fixed;
	background-position:center;
	background-image: url(../images/bg03.jpg);
	background-repeat: no-repeat;
	background-color: #000000;
	}
	
img { border: 0; }

#header {
 	padding: 15px;
	margin-top: 5px;}


#menu {position: absolut;
		margin: 0 auto;
		overflow:hidden;
	  padding: 0px;
	  top: 20%;
	  background: url(../images/nav-bar-bg.gif) no-repeat;
	  height: 83px; width: 760px;}
	  
#menu li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
    position: relativ;
    height: 83px;}
#menu a, #menu span { float: left; }
.cleft { clear: left;}

#nav {
  padding-top: 10px;
  text-align: center;
	position: fixed;
	  float: left;
	  top: 45%;
	width: 180px;
}
.nava {
  margin-bottom: -10px;
  margin-left: 1px;
  
}
.navin {
  background: url(../images/nav_bg.png) repeat-y;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nave {
  background-image: url(../images/nav_bg_end.png); 
  background-repeat: no-repeat;
    margin-bottom: -15px;
}

#footer {
	float: right;
	width: 100%;
	margin: 4% 0 0 0;
	color: #FFFFFF;
	padding: 25px;
	font-size: 0.9em;
	}

/*###########################Team#############################*/

#teamborderup { position: absolut;
		margin: 35px auto 0 auto;
		border: 0px;
		background:url(../images/bg-feat_u.png) top no-repeat;
		width: 834px;
		}
#teamcontainer { position: absolut;
		margin: -5px auto 0 auto;
		border: 0px;
		background-image: url(../images/bg-feat_m.png);
		background-repeat: repeat-y;
		padding: 1px 0px 0px 0px;
		width: 834px;
		}
#teamborderdown { position: absolut;
		margin: 0 auto 0 auto;
		width: 834px;
		}
		
#teamcontainer h1 { font-variant:small-caps; font: 2em;}
#teamcontainer img.avatar {margin-left: 95px;}




/****************************LINKSLINKSLINKSLINKS**********************************/

#menu a.nav1:hover {
             background:url(../images/nav-bar1.gif) 0px -83px no-repeat;
             height:83px;
             border: none;}
#menu a.nav2:hover {
             background:url(../images/nav-bar2.gif) 0px -83px no-repeat;
             height:83px; width: 152px;}
#menu a.nav3:hover {
             background:url(../images/nav-bar3.gif) 0px -83px no-repeat;
             height:83px;}
#menu a.nav4:hover {
             background:url(../images/nav-bar4.gif) 0px -83px no-repeat;
             height:83px;}
#menu a.nav5:hover {
             background:url(../images/nav-bar5.gif) 0px -83px no-repeat;
             height:83px; width: 152px;}            
#menu a.nav12 {display:block;
             background:url(../images/nav-bar1.gif) 0px -83px no-repeat;
             height:83px;}
#menu a.nav22 {display:block;
             background:url(../images/nav-bar2.gif) 0px -83px no-repeat;
             height:83px; width: 152px;}
#menu a.nav32 {display:block;
             background:url(../images/nav-bar3.gif) 0px -83px no-repeat;
             height:83px;}
#menu a.nav42 {display:block;
             background:url(../images/nav-bar4.gif) 0px -83px no-repeat;
             height:83px;}
#menu a.nav52 {display:block;
             background:url(../images/nav-bar5.gif) 0px -83px no-repeat;
             height:83px;}
             
 a:link{color:#008B00;text-decoration: none;}
 a:visited { color: #008B00; text-decoration: none;}
 a:hover{color:#008B00;text-decoration: none; text-shadow: #006400 2px 2px 1px;}
 a:active{color:#008B00;text-decoration: none;}

a.copy:link{color:blue;text-decoration: none;}
a.copy:visited { color: blue; text-decoration: none;}
a.copy:hover{color:blue;text-decoration: none; text-shadow: darkblue 2px 2px 1px;}
a.copy:active{color:blue;text-decoration: none;}

 
 /**********************/
/*   CSS für die speziellen Umrandungen   */
 /**********************/
 
 #top {
		background: url(../images/edges/hdr-bg.png) repeat-x;}
#main { position: absolut;
		margin: 35px auto 0 auto;
		border: 0px;
		width: 834px;
		}
#container { position: absolut;
		border: 0px;
		background-image: url(../images/bg-feat_m.png);
		background-repeat: repeat-y;
		margin: -5px 0px 0px 0px;
		padding-top: 10px;
		}
#teamborderdown { position: absolut;
		margin: 0 auto 0 auto;
		width: 834px;
		}
		
#container h1 { font-variant:small-caps; font: 2em;}
#container img.avatar {margin-left: 95px;}

#main-l {
	background-image:url(images/edges/left.gif);
	background-repeat:repeat-y;
	background-position:left top;
}
#main-r {
	background-image:url(images/edges/right.gif);
	background-repeat:repeat-y;
	background-position:right top;
}

Ich habe schon versucht, die einzelnen Bildteile als background-images zu verwenden und dann die <div> zu verschachteln, mit mäßigem Erfolg.

Würde mich sehr über Hilfe freuen.

Vielen Dank und schönen Tag noch.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.10.2010, 23:36
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

12 Stunden später

in main_1 stimmt der Pfad zur Grafik nicht ( ../ richtig setzen)

und #container muss natürlich die richtigen margins links und rechts erhalten, damit dessen Hintergrundbild nicht die darunterliegenden Grafiken verdeckt.
So sollte es gehen.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.10.2010, 10:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2010
Beiträge: 2
Vadril befindet sich auf einem aufstrebenden Ast
Standard

Könnten auch 20h später sein (;
Wie dem auch sei, danke für den Hinweis, ich habs entsprechend geändert.
Leider hat es mir nicht geholfen... also schon geholfen, aber das Problem nicht gelöst (;

Aus verzwickten Gründen werden mir die beiden Grafiken gar nicht erst angezeigt, sie werden auch nicht von den anderen überlagert...
Mit Zitat antworten
Antwort

Stichwörter
background-image, border, container, div, rahmen, rand, verschachtelt

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
Bild mit Rahmen aus Bild Holger (HMR) CSS 3 21.05.2008 12:55
CSS Problem .. mittlerer Container variabel BallaBalla07 CSS 0 21.03.2008 14:38
Umgekehrtes Problem: Container soll herausragen, ie... Hustler CSS 12 18.12.2007 15:30
Rahmen (Grafik) - Problem Heart CSS 2 24.05.2005 20:17
Container nebeneimamder statt untereinander Philippp CSS 2 20.09.2004 17:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:12 Uhr.