Stylesheetveränderung

Status
Nicht offen für weitere Antworten.
C

CyberOx

Grünschnabel
Hi,

ich müsste mein Stylesheet ein wenig verändern.
1. Wollte ich mein Logo einfügen, was auch soweit gelang wie unten zu sehen.
Leider habe ich es bis jetzt nicht geschafft es auszurichten. Desweiteren möchte ich schon ganz gerne das auch (wenn das Logo zentriert ist) links und recht der Hintergrund weiß ist.
Ich habs versucht, weiß aber nicht warum es nicht t.
2. verschieben sich die navibuttons ins neue Logo. ( Sieht schon ein bißchen doof aus)
Ich möchte sie gerne unter dem Logo anordnen.

Bitte um Hilfe.

ul {margin:0px; padding:0px; list-style:none; line-height:24px;}
li {padding:0px; background:url(images/bg_ul.gif) bottom repeat-x;}
li a {color:#333300; text-decoration:none;}

.ul_2 li {padding:0px; background:url(images/ul_2.gif) bottom repeat-x;}

body{
padding:0;
margin:0;
background:#FFFFFF url(images/bg.gif);
width:100%;
vertical-align:top;
font-family: arial;
color:#FFFFFF; line-height:14px; font-size:12px;
}


html{ font-size:11px;}

a:hover {text-decoration:none;}

form, div, input, textarea{ margin:0; padding:0;}
input, textarea {font-family: tahoma; color:#333300; line-height:14px; font-size:11px;}

input, textarea {width:192px; padding:2px 0px 0px 5px;}
input {height:21px;}

b {color:#45860A;}

.dt {
width:100%;
display:table;
text-align:left;
}
.dr {
width:100%;
display:table-row;
height:100%;
}
.dc {
vertical-align:top;
display:table-cell;
vertical-align:top;
width:100%;
}

.flash {width:765px; height:260px; background:url(images/logo_xl.jpg) bottom left no-repeat;}

.main {width:765px; height:100%;}
.content {width:765px; background:url(images/bg_cont.jpg) top left no-repeat;}

.boxes {height:505px; width:765px;}

.box_1 {background:#CCCC99;}
.box_1_tl {background:#CCCC99 url(images/box_1_lt.gif) top left no-repeat;}
.box_1_bl {height:100%; background:url(images/box_1_lb.gif) bottom left no-repeat;}
.box_1_tr {background:#CCCC99 url(images/box_1_tr.gif) top right no-repeat;}
.box_1_br {height:100%; background:url(images/box_1_br.gif) bottom right no-repeat;}


.box_2_t {background:#F1F1E3 url(images/box_2_t.gif) top repeat-x;}
.box_2_b {background:url(images/box_2_b.gif) bottom repeat-x;}
.box_2_l {background:url(images/box_2_l.gif) top left no-repeat;}
.box_2_r {background:url(images/box_2_r.gif) top right no-repeat;}

.box_3 {background-color:#FFFFFF;}
.box_3_tr {background:#FFFFFF url(images/box_3_tr.gif) top right no-repeat;}
.box_3_tr2 {background:url(images/box_3_tr.gif) top right no-repeat;}
.box_3_br {height:100%; background:url(images/box_3_br.gif) bottom right no-repeat;}
.box_3_tl {background:#FFFFFF url(images/box_3_tl.gif) top left no-repeat;}
.box_3_bl {height:100%; background: url(images/box_3_bl.jpg) bottom left no-repeat;}

.box_4_t {background:#E5E5C9 url(images/box_4_t.gif) top repeat-x;}
.box_4_b {background:url(images/box_4_b.gif) bottom repeat-x;}
.box_4_l {background:url(images/box_4_l.gif) bottom left no-repeat;}
.box_4_r {background:url(images/box_4_r.gif) bottom right no-repeat;}

.box_5 {background:#F7FAFC;}
.box_5_tl {background:#F7FAFC url(images/box_5_tl.gif) top left no-repeat;}
.box_5_bl {height:100%; background: url(images/box_5_bl.gif) bottom left no-repeat;}

.box_6_t {background: url(images/box_6_t.jpg) top repeat-x;}
.box_6_l {background:url(images/box_6_l.gif) top left no-repeat;}
.box_6_r {background:url(images/box_6_r.gif) top right no-repeat;}

.box_7_t {background: url(images/box_7_t.jpg) top repeat-x;}
.box_7_l {background:url(images/box_7_l.gif) top left no-repeat;}
.box_7_r {background:url(images/box_7_r.gif) top right no-repeat;}


.a1 {color:#993300; font-weight:bold;}
.a2 {color:#333300;}
.a3 {color:#666666; font-weight:bold;}
.a4 {color:#45860A;}
.a5 {color:#225C0C;}


.copy {height:72px;}
.cop {height:72px; color:#FFFFFF; font-size:13px; line-height:16px;}
.menu {color:#000000;}
.menu a {color:#FFFFFF; font-weight:bold;}

.tab {width:222px; font-size:11px;}
.tab_r {height:16px;}
.tab_c {background-color:#FBFBF7;}
.tab_1 {padding-top:1px;}
.tab_1 div {margin-left:5px;}
.tab_2 {text-align:center; padding-top:1px;}
 
Hi,

ohne den dazugehörigen HTML-Quelltext lässt sich derzeit wenig bis garnichts dazu sagen. Vielleicht kannst du auch den Link zur Seite nennen, damit man sie mit den eingebundenen Hintergrundbilder betrachten kann.

Und nutze doch bitte die Highlight-Tags zum Auszeichnen des Quellcodes. Vielen Dank.
 
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>----Index----</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/b1h.jpg','images/b2h.jpg','images/b3h.jpg','images/b4h.jpg','images/b5h.jpg')">
<div style="width:100%; height:100%;" align="center">
	<div class="dt" style="width:765px; height:100%; border:1px solid #000000; border-top:0px; border-bottom:0px;">
		<div class="dr">
			<div class="dc main">
			<div class="flash">
				  		<img src="images/spacer.gif" width="1" height="43" alt=""><br>
          <img src="images/spacer.gif" width="20" height="1" alt="" align="middle"><img src="images/spacer.gif" width="31" height="1" alt="" align="middle"><br>
						<img src="images/spacer.gif" width="1" height="44" alt=""><br>
						<img src="images/spacer.gif" width="13" height="1" alt=""><img alt="" src="images/b1h.jpg" name="b1" width="93" height="38" border="0"><a href="index-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b2','','images/b2h.jpg',1)"><img alt="" src="images/b2.jpg" name="b2" width="115" height="38" border="0"></a><a href="index-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b3','','images/b3h.jpg',1)"><img alt="" src="images/b3.jpg" name="b3" width="85" height="38" border="0"></a><a href="index-3.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b4','','images/b4h.jpg',1)"><img alt="" src="images/b4.jpg" name="b4" width="93" height="38" border="0"></a><a href="index-4.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b5','','images/b5h.jpg',1)"><img alt="" src="images/b5.jpg" name="b5" width="90" height="38" border="0"></a><a href="index-5.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b6','','images/b6h.jpg',1)"><img alt="" src="images/b6.jpg" name="b6" width="93" height="38" border="0"></a>
			</div>
			<div class="content">
				<div class="dt boxes">
					<div class="dr">
						<div class="dc" style="width:7px;"></div>
						<div class="dc box_1_tl" style="width:240px;">
							<div class="dt box_1_bl">
								<div class="dr">
									<div class="dc">
											<img src="images/spacer.gif" width="1" height="23" alt=""><br>
											<img src="images/t_1_1.gif" alt="" border="0" style="margin-left:14px;"><br>
											<br style="line-height:20px;">
											<div style="margin:0px 20px 0px 20px;">
												<strong>Nam sagittis libero at nibh. Aliqua volutpat.</strong> Sed eu erat id arcu viverra convallis. Mauris iaculis neque.<br>
												<a href="#" class="a1">more about</a>
											</div>
											<br style="line-height:34px;">
											<div class="box_2_t" style="margin:0px 3px 0px 3px;">
												<div class="dt box_2_b">
													<div class="dr">
														<div class="dc box_2_l">
														<div class="box_2_r" style="width:234px; height:155px;" align="center">
															<img src="images/spacer.gif" width="1" height="16" alt=""><br>
															<img src="images/t_1_2.jpg" alt="" border="0"><br>
															<br style="line-height:18px;">
															<div class="dt tab">
																<div class="dr" style="height:18px;">
																	<div class="dc tab_1" style="width:61px;"><div><strong>PLAYER</strong></div></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:49px;"><strong>GOALS</strong></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:65px;"><strong>ASSISTS</strong></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:44px;"><strong>PINTS</strong></div>
																</div>
															</div>
															<div class="dt tab">
																<div class="dr tab_r">
																	<div class="dc tab_c tab_1" style="width:61px;"><div>J. Robson</div></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:49px;">6</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:65px;">12</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:44px;">23</div>
																</div>
															</div>
															<div class="dt tab">
																<div class="dr tab_r">
																	<div class="dc tab_1" style="width:61px;"><div>B. Molko</div></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:49px;">4</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:65px;">6</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:44px;">16</div>
																</div>
															</div>
															<div class="dt tab">
																<div class="dr tab_r">
																	<div class="dc tab_c tab_1" style="width:61px;"><div>R. Bon</div></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:49px;">7</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:65px;">1</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:44px;">14</div>
																</div>
															</div>
															<div class="dt tab">
																<div class="dr tab_r">
																	<div class="dc tab_1" style="width:61px;"><div>M. Straus</div></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:49px;">2</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:65px;">2</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_2" style="width:44px;">12</div>
																</div>
															</div>
															<div class="dt tab">
																<div class="dr tab_r">
																	<div class="dc tab_c tab_1" style="width:61px;"><div>R. Tomson</div></div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:49px;">3</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:65px;">1</div>
																	<div class="dc" style="width:1px;"></div>
																	<div class="dc tab_c tab_2" style="width:44px;">9</div>
																</div>
															</div>
														</div>
														</div>
													</div>
												</div>
											</div>
											<br style="line-height:6px;">
											<div class="box_2_t" style="margin:0px 3px 0px 3px;">
												<div class="dt box_2_b">
													<div class="dr">
														<div class="dc box_2_r">
														<div class="box_2_l" style="width:234px; height:155px;" align="center">
															<img src="images/spacer.gif" width="1" height="15" alt=""><br>
															<img src="images/t_1_3.jpg" alt="" border="0"><br>
															<br style="line-height:14px;">
															<img src="images/img_1_1.jpg" alt="" border="0"><br>
															<br style="line-height:1px;">
															<div style="margin:0px 30px 0px 31px;">
																Nam sagittis libero at nibh aliquam erat <a href="#" class="a2">volutpat</a>
															</div>
														</div>
														</div>
													</div>
												</div>
											</div>
											<br style="line-height:10px;">
									</div>
								</div>
							</div>
						</div>
						<div class="dc" style="width:3px;"></div>
						<div class="dc box_3" style="width:265px;">
							<div style="margin:0px 12px 0px 20px;">
								<img src="images/spacer.gif" width="1" height="25" alt=""><br>
								<img src="images/t_1_4.gif" alt="" border="0"><br>
								<br style="line-height:17px;">
								<img src="images/img_1_2.jpg" alt="" border="0"><br>
								<br style="line-height:9px;">
								<b>15 Jan. 2007</b><br>
								<br style="line-height:6px;">
								<strong>Nam sagittis libero at nibh aliquam erat volutpat,</strong> sed eu erat id arcu viverra conval- lis. Cras eget nunc. Nullam gravida. Mauris pharetra iaculis neque. Etiam tempus elit non odio. <a href="#" class="a1">learn more</a><br>
								<br style="line-height:25px;">
								<img src="images/img_1_3.jpg" alt="" border="0"><br>
								<br style="line-height:13px;">
								<b>09 Jan. 2007</b><br>
								<br style="line-height:6px;">
								<strong>Donec mollis, est ac nonummy semper, nibh justo ,</strong> vivamus sodales accumsan massa, vulputate sit amet, dignissim et, pede. Maecenas rutrum. <a href="#" class="a1">learn more</a><br>
								<br style="line-height:10px;">
							</div>
						</div>
						<div class="dc" style="width:3px;"></div>
						<div class="dc box_3_tr" style="width:240px;">
							<div class="dt box_3_br">
								<div class="dr">
									<div class="dc">
										<div style="margin:0px 12px 0px 20px;">
											<img src="images/spacer.gif" width="1" height="25" alt=""><br>
											<img src="images/t_1_5.gif" alt="" border="0"><br>
											<br style="line-height:12px;">
											<ul style="width:195px;">
												<li><a href="#">Nam sagittis libero at</a></li>
												<li><a href="#">Nibh aliquam erat volutpat</a></li>
												<li><a href="#">Sed eu erat id arcu viverra convallis.</a></li>
												<li><a href="#">Cras eget nunc</a></li>
												<li><a href="#">Iaculis neque nam sagittis libero</a></li>
												<li><a href="#">Nibh aliquam erat volutpat</a></li>
												<li><a href="#">Etiam temodio lorem ipsum</a></li>
											</ul>
											<br style="line-height:4px;">
											<a href="#" class="a1">more features</a><br>
											<br style="line-height:31px;">
											<img src="images/t_1_6.gif" alt="" border="0"><br>
											<br style="line-height:17px;">
											<img src="images/img_1_4.jpg" alt="" align="left" border="0" style="margin-right:16px;">
											<img src="images/spacer.gif" width="1" height="11" alt=""><br>
											<a href="#" class="a3">companyname.com</a><br>
											<br style="line-height:27px;">
											<img src="images/img_1_5.jpg" alt="" align="left" border="0" style="margin-right:16px;">
											<img src="images/spacer.gif" width="1" height="11" alt=""><br>
											<a href="#" class="a3">companysite.com</a><br>
											<br style="line-height:31px;">
											<img src="images/img_1_6.jpg" alt="" align="left" border="0" style="margin-right:16px;">
											<img src="images/spacer.gif" width="1" height="11" alt=""><br>
											<a href="#" class="a3">sitename.com</a><br>
											<br style="line-height:25px;">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="dc" style="width:7px;"></div>
					</div>
				</div>
				<div class="dt copy">
					<div class="dr">
						<div class="dc" style="width:20px;"></div>
						<div class="dc" style="width:40px;">
							<img src="images/spacer.gif" width="1" height="14" alt=""><br>
							<img src="images/logo_copy.jpg" alt="" border="0">
						</div>
						<div class="dc cop" style="width:187px;">
							<br style="line-height:14px;">
							Copyright &copy; 2007 Soccer Club<br>
							All Rights Reserved.<br>
							<br style="line-height:15px;">
						</div>
						<div class="dc" style="width:27px;"></div>
						<div class="dc menu" style="width:484px;">
							<br style="line-height:15px;">
							| <a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | <a href="index-1.html">Our Team</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | <a href="index-2.html">News</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | <a href="index-3.html">History</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | <a href="index-4.html">Match</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | <a href="index-5.html">Gallery</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | <a href="index-6.html">Terms of Use</a><br>
							<br style="line-height:15px;">
						</div>
						<div class="dc" style="width:7px;"></div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
 
Falls du mit dem Logo das Hintergrundbild im DIV .flash meinst:

Code: 
.flash {width:765px; height:260px; background:#fff url(images/logo_xl.jpg) bottom center no-repeat;}
Alles weitere kann erst besprochen werden, wenn du hier den Link zur Seite nennst, denn ohne die eingebundenen Grafiken bzw. Hintergrundbilder ist da nicht viel zu erkennen, geschweige denn von den Verschiebungen.
 
ja das ist das logo unter flash.(logo_xl).

Ich würde dir ja gerne die Adresse der Seite geben,aber die Seite ist noch nicht online.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück