Ergebnis 1 bis 4 von 4

Thema: CSS layout formatierung! BODY wird immer größer...

  1. #1
    Berti123
    Gast

    Standard CSS layout formatierung! BODY wird immer größer...

    hi zusammen bin neu und habe mal dreikt eine frage,

    Ich habe folgendes Probelm meine desginte Homepage hat einen Farbverlauf im HIntergrund also rechts und links vom content... das doofe ist, dass wenn ich den Bg vom body schwarz mache sehen die zwei teile links und rechts abgehackt aus (.gif) nun will ich den body soweit verkürzen das man das abgehackte nicht mehr sieht (höhe verkürzen). Ergebnis soll sein das man im Browser den BG vom Body nach unten hinaus nicht mehr mehr sieht. Nur wiess ich nicht wie das gehen soll, hab vom kollegen erfahren das ich ein div um das ganze desgin machen sollte und die Hp dort drinne formatieren.

    Leider klappt das nicht ganz so wie es soll...
    hat jemand ein vorschlafg oder ne super idee so das ich das ganze nicht mühselig umschreiben muss

    DANKE!!!

    Code:
    body
    {
    background-color:rgb(10,14,16);
    background-position:center;
    height:50%;
    }
    
    
    #BG_links
    {
    	position:relative;
    	top:-12px;
    	right:196px;
    	width:282px;
    	height:826px;
    	left: -43px;
    	background-image: url(Bilder/BG_links.gif);
    	
    }
    
    
    #Login
    {
    	position:relative;
    	top:-837px;
    	right:196px;
    	width:738px;
    	height:104px;
    	left: 240px;
    	background-image:url(Bilder/Login.gif);
    	
    }
    
    #Banner
    {
    	position:relative;
    	top:-836px;
    	right:196px;
    	width:592px;
    	height:250px;
    	left: 241px;
    	background-image:url(Bilder/Banner.gif);
    	
    }
    
    #Navi_1
    {
    	position:relative;
    	top:-836px;
    	right:196px;
    	width:279px;
    	height:50px;
    	left: 241px;
    	background-image:url(Bilder/Navi_1.gif);
    	cursor:pointer;
    	
    }
    #Navi_2
    {
    	position:relative;
    	top:-886px;
    	right:196px;
    	width:234px;
    	height:50px;
    	left: 520px;
    	background-image:url(Bilder/Navi_2.gif);
    	cursor:pointer;
    }
    #Navi_3
    {
    	position:relative;
    	top:-936px;
    	right:196px;
    	width:225px;
    	height:50px;
    	left: 754px;
    	background-image:url(Bilder/Navi_3.gif);
    	cursor:pointer;
    }
    
    #Content
    {
    	position:relative;
    	top:-936px;
    	right:196px;
    	width:739px;
    	height:420px;
    	left: 240px;
    	background-image:url(Bilder/Content2.gif);
    	
    }
    
    #Banner_navi_1
    {
    	position:relative;
    	top:-1656px;
    	right:196px;
    	width:146px;
    	height:39px;
    	left: 831px;
    	background-image:url(Bilder/Banner_navi_1.gif);
    	
    }
    
    #Banner_navi_2
    {
    	position:relative;
    	top:-1472px;
    	right:196px;
    	width:144px;
    	height:27px;
    	left: 833px;
    	background-image:url(Bilder/Banner_navi_2.gif);
    	
    }
    
    #Banner_navi_About
    {
    	position:relative;
    	top:-1683px;
    	right:196px;
    	width:146px;
    	height:36px;
    	left: 831px;
    	background-image:url(Bilder/Banner_navi_About.gif);
    	cursor:pointer;
    }
    
    #Banner_navi_Contact
    {
    	position:relative;
    	top:-1645px;
    	right:196px;
    	width:145px;
    	height:37px;
    	left: 832px;
    	background-image:url(Bilder/Banner_navi_Contact.gif);
    	cursor:pointer;
    }
    
    #Banner_navi_Homepage
    {
    	position:relative;
    	top:-1683px;
    	right:196px;
    	width:146px;
    	height:39px;
    	left: 831px;
    	background-image:url(Bilder/Banner_navi_Homepage.gif);
    	cursor:pointer;
    }
    #Banner_navi_Projekte
    {
    	position:relative;
    	top:-1646px;
    	right:196px;
    	width:144px;
    	height:35px;
    	left: 833px;
    	background-image:url(Bilder/Banner_navi_Projekt.gif);
    	cursor:pointer;
    }
    
    #Banner_navi_Downloads
    {
    	position:relative;
    	top:-1755px;
    	right:196px;
    	width:146px;
    	height:38px;
    	left: 831px;
    	background-image:url(Bilder/Banner_navi_Downloads.gif);
    	cursor:pointer;
    }
    
    #BG_rechts
    {
    	position:relative;
    	top:-2013px;
    	right:196px;
    	width:250px;
    	height:826px;
    	left: 978px;
    	background-image:url(Bilder/BG_rechts.gif);
    	
    }
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Delux Signz</title>
    <link rel="stylesheet" type="text/css" href="style.css"><style type="text/css">
    .style1 &#123;
    	font-family&#58; Georgia, "Times New Roman", Times, serif;
    	font-size&#58; 18px;
    &#125;
    .style2 &#123;color&#58; #000000&#125;
    .style3 &#123;font-size&#58; 16px&#125;
    </style></head> <body>
    
    		
    	
    		<div id="BG_links"> </div>
    		<div id="Login"> </div>
    		<div id="Banner"> </div>
    		<div id="Navi_1"> </div>
    		<div id="Navi_2"> </div>
    		<div id="Navi_3"> </div>
    		<div id="Content"> </div>
    		<div id="Banner_navi_1"> </div>
    		<div id="Banner_navi_2"> </div>
    		<div id="Banner_navi_Homepage"> </div>
    		<div id="Banner_navi_About"> </div>
    		<div id="Banner_navi_Contact"> </div>
    		<div id="Banner_navi_Projekte"> </div>
    		<div id="Banner_navi_Downloads"> </div>
    		<div id="BG_rechts"> </div>
    		</td>
            </tr>
            </table>
    </body>
    		</html>
    
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So recht verstanden hab' ich dein Problem nicht.
    Falls du ein Layout willst, bei dem der Inhalt die gesamte Fensterhöhe einnimmt, dann sieh mal, ob dir das weiter hilft: http://www.ohne-css.gehts-gar.net/demo/0025.html

    In den FAQ's sind auch verschiedene Links zu Layoutbeispielen.

    Ansonsten:
    Kannst du mir erklären, weshalb jeder div position relative mit top- und right-Werten hat?
    Falls nicht, dann lass den ganzen Käse weg und arbeite mit float- und margin-Angaben.

  3. #3
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du kannst keinen body verkürzen, der body ist die ganze Seite.
    Mach lieber einen eigenen content-div.

  4. #4
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Berti123,

    mach es nicht komplizierter als es ist. Erzeuge ein Hintergrundbild in der Form(siehe Anhang) und zentriere es.
    Angehängte Dateien Angehängte Dateien
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

Ähnliche Themen

  1. Padding- Block Element wird größer?!
    Von cursed_phil im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 15.05.2008, 19:19
  2. Antworten: 17
    Letzter Beitrag: 31.07.2006, 15:52
  3. Tabelle wird größer dargestellt als angegeben
    Von Gast im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 12.05.2006, 15:32
  4. Layout wird im FF falsch dargestellt, im IE richtig
    Von Frodo im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 12.03.2006, 11:42
  5. body onload + body onunload in einer Seite machbar?
    Von Semmel im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 18.08.2004, 16:23

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •