Ergebnis 1 bis 1 von 1
  1. #1
    Mitglied
    Registriert seit
    Jun 2005
    Beiträge
    148
    Danksagungen
    79

    Standard Header in volle Breite des Browsers anzeigen?

    Problem habe ich jetzt gelöst, folgender CSS Reset Code war nötig

    * {
    margin: 0;
    padding: 0;
    }

    jetzt wird in voller Breite richtig angezeigt

    *****************************************************************

    Ich habe vergeblich versucht <Header>Tag in volle Breite des Browser anzuzeigen. Habe bereits Einstellungen wie width:100% oder Auto bzw. Margin: 0px probiert, leider bekomme ich Darstellung immer mit ca 5px Abstand zum Rand angezeigt . Wo liegt das Problem?

    Ich arbeite mit Dreamweaver CC

    Danke für die Hilfe im Voraus


    *******************************************************************
    hier habe ich ein screenshot gemacht, damit man sehen kann , was ich meine !



    HTML CODE

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Ditib Porz</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/open-sans:n3,n4,n6,i4:default.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    <div id="wrapper">
    
    
      <div id="bg_shadow"> 
      
      <header class="header"> 
      
      <div id="logo">
        <h1> Köln Porz </h1>
      </div>
      <div>&nbsp;&nbsp;</div>
      <div id="media"><br>
    
        <img src="background/facebook.png" alt=""/>&nbsp;
         <img src="background/twitter.png" alt=""/>&nbsp;
        <img src="background/post2.png" alt=""/></div>
        <div class="clear"></div>
        
        <nav>
    					<ul>
    						<li><a href="#" title="Home">HOME</a></li>
    						<li><a href="#" title="Rooms" target="_blank">TEST</a></li>
    						<li><a href="#" title="über uns" target="_self">ÜBER UNS</a></li>
    						<li><a href="#" title="download" target="_self">DOWNLOAD</a></li>
    						<li><a href="#" title="Gallery" target="_self">GALERIE</a></li>
    						<li><a href="#" title="Contact" target="_self">KONTAKT</a></li>
                            <li><a href="#" title="impressum" target="_self">IMPRESSUM</a></li>
    					</ul>
    					
    				</nav>
      
      </header>
      
      </div>
    
      <div class="clear"></div>
      
    <section id="reklame">
        <article>Raum für den Inhalt des neuen section-Tags</article>
        <article>Raum für den Inhalt des neuen article-Tags</article>
      </section>
      
      <main>
      
      </main>
      
      <section>
      	<aside class="left">Raum für den Inhalt von  class "left"</aside>
    	<article>Raum für den Inhalt des neuen article-Tags</article>
        <aside class="right">Raum für den Inhalt von  class "right"</aside>
      </section>
      <div class="clear">Raum für den Inhalt von  class "clear"</div>
    
    <footer>
        <nav>
        	<ul>
            	<li>Tel.: 0000-591871</li>
              <li>Fax.: 0000 - 000000</li>
                <li>E-Mail: info@köln-porz.de</li>
                <li>www.köln-porz.de</li>
            </ul>
        </nav>
    </footer>
      <div class="clear"></div>
    </div>
    
    </body>
    </html>
    CSS Code

    Code:
    @charset "utf-8";
    
    img {
    	max-width: 100%;
    	height: auto;
    	text-align: right;
    }
    
    nav ul li {
    	list-style-type: none;
    	display: inline-block;
    	float: left;
    	
    	text-align: left;
    	margin-top: 0px;
    	margin-bottom: 0px;
    	margin-right: 43px;
    	margin-left: -39px;
    	
    }
    nav {
    	left: 0px;
    	right: 0px;
    	
    	height: 50px;
    	
    	display: block;
    	width: auto;
    	}
    #wrapper {
    	width: 100%;
    	margin-left: 0px;
    	margin-right: 0px;
    
    
    
    
    
    
    
    
    }
    
    
    
    
    
    .wrapper {
    
    
    
    
    }
    
    
    
    .clear {
    	clear: both;
    }
    
    nav ul {
    
    
    }
    
    
    ul li a {
    	width: 100%;
    	height: 43px;
    	display: block;
    	font-family: open-sans;
    	font-style: normal;
    	font-weight: 600;
    	text-align: center;
    	padding-top: 8px;
    	
    	color: rgba(255,255,255,1.00);
    	text-decoration: none;
    	margin-right: 50px;
    	font-size: 20px;
    	margin-left: 0px;
    }
    ul li a:hover {
    	background-color: rgba(218,196,3,1.00);
    	text-decoration: underline;
    }
    footer nav {
    	width: 100%;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: rgba(97,178,4,0.900);
    	
    	text-shadow: 0px 1px 0px rgba(163,163,163,1.00);
    	margin-top: auto;
    	margin-bottom: auto;
    	
    }
    footer nav ul {
    	width: 100%;
    	display: inline-block;
    	list-style-type: none;
    	padding-top: 0px;
    	position: relative;
    }
    footer nav ul li {
    	width: 250px;
    	display: inline-block;
    	float: left;
    	color: rgba(255,255,255,1.00);
    	font-family: open-sans;
    	font-style: normal;
    	font-weight: 400;
    	text-align: center;
    	line-height: px;
    	font-size: 16px;
    }
    footer nav ul li:first-child {
    
    
    }
    footer nav ul li a {
    	color: rgba(255,255,255,1.00);
    	display: inline-block;
    }
    footer {
    	max-width: 1050px;
    	margin-left: auto;
    	margin-right: auto;
    }
    .header {
    	display: block;
    	margin-top: -15px;
    	margin-bottom: auto;
    	
    	height: 160px;
    	padding-top: 0px;
    	width: auto;
    	margin-right: auto;
    	margin-left: auto;
    	right: auto;
    	left: auto;
    	max-width: 1050px;
    }
    .header div {
    	float: left;
    	text-align: center;
    	display: block;
    	width: auto;
    	min-width: 340px;
    	max-width: 1050px;
    }
    .header #logo h1 {
    	text-indent: -9999px;
    	background-image: url(../images/KOELN_porz_horizontal_300.png);
    	width: 300px;
    	height: 88px;
    	margin-top: 0px;
    	display: none;
    }
    .header #media {
    	text-align: right;
    
    
    
    
    
    
    
    
    
    }
    body {
    	background-repeat: no-repeat;
    	/* [disabled]background-image: url(../background/slideshow/IMG_7872.JPG); */
    	background-position: 0% 0%;
    	background-size: cover;
    
    }
    #bg_shadow {
    	width: 100%;
    	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,1.00);
    	box-shadow: 0px 1px 3px rgba(0,0,0,1.00);
    	background-color: rgba(0,0,0,0.100);
    	margin-left: 0px;
    	margin-right: 0px;
    	min-width: 1050px;
    	-moz-box-shadow: 0px -5px 20px 5px #000000;
    	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#8c000000,Positive=true)";
    }
    Geändert von Tokatci (19. 04. 2017 um 09:44 Uhr) Grund: [Problem Gelöst]

  2.  
     
     

Berechtigungen

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