Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS: Div verschiebt sich ungewollt beim Fenster skalieren“

vincitore

Aktives Mitglied

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

als kleiner Tipp noch: den "center"-Tag gibt es ab html5 nicht mehr. Da du ja noch am Anfang bist, nutz direkt die Möglichkeit das ganze mit CSS zu realisieren und dann hast du es bei einem etwaigen Wechsel auf html5 später mal einfacher.
 

killa343

Langweiller

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

@patrick.

Patrick, wo kommt dieser Space her? (rot markiert)



Code:
@charset "utf-8";
/* CSS Document */

* {
	padding:0; 
	margin:0; 
	border:none; 
	outline:none; 
	list-style:none; 
	font-size:100%;
	}
	
.clear {
	clear:both;
	}
	
html {
	min-height:100%; 
	min-width:100%;
}
body {
	background-image:url(../Bilder/background.jpg);
	background-repeat:no-repeat;
	background-color:#000;
	background-position:center;
	}
			
#wrapper {
	width:940px; 
	margin:20px auto;
	}
	
#nav {
	margin-left:340px;
	width:145px; 
	height:62px; 
	}
	
#nav ul {
	width:1200px;
	height:62px; 
	}
	
#nav ul li { 
	padding-top:10px; 
	float:left;
	}
	
#nav ul li a {
	color:#fff; 
	text-decoration:none; 
	padding:62px 55px;
	}
	
#nav ul li a:hover {
	background-image:url(../Bilder/mouse_over.png);
	background-repeat:no-repeat;
	}
	
#logo {
	width:309px; 
	height:519px;
	background-image:url(../Bilder/slider.png); 
	background-repeat:no-repeat;
	padding:10px; 
	float:left;
	}
	
#right {
	width:590px; 
	background-color:; 
	padding-left:10px; 
	float:left;
	}
	
#content {
	height:333px;
	margin-bottom:10px;
	background-image:url(../Bilder/content.png);
	}
	
#content_btn {
	height:197px;
	width:601px;
	background-image:url(../Bilder/content_btn.png);
	background-repeat:no-repeat;
	}
	
/* alle 3 Spalten mit gleicher Breite */
.col-1, .col-2 {
	width: 270px;
	height:197px;
	padding:10px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

.col-1 {
	float: left;
	}
	
 .col-2 {
	 float:right;
 }

	
#content, #content_btn {
	width:600px; 
	background-color:;
	}
	
#footer {
	width:960px; 
	height:40px; 
	background-color:;
	}

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body>
    <div id="wrapper">
    	<div id="nav">
      	<ul>
        	<li><a href="#">page 1</a></li>
          <li><a href="#">page 2</a></li>
          <li><a href="#">page 3</a></li>
          <li><a href="#">page 4</a></li>
        </ul>
        <br class="clear" />
      </div>
      <div id="logo">
      </div>
      <div id="right">
        <div id="content">
        	<div id="slider">
          	<ul>
            	<li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image1.jpg" alt="" /></li>
              <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image2.jpg" alt="" /></li>
              <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image3.jpg" alt="" /></li>
              <li><img src="http://www.psd-tutorials.de/forum/papa/assets/images/slider/image4.jpg" alt="" /></li>
            </ul>
          </div>
        </div>
        <div id="content_btn">
        	<div class="col-1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
          <div class="col-2">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
          <br class="clear" />
        </div>
      </div>
      <br class="clear" />
      <div id="footer">
      	<!-- footer content here -->
      </div>
    </div>
  </body>
</html>

Und kann ich bei dem "text-overflow: ellipsis;" im "#Content_btn" auch machen das er nicht nur eine Zeile sondern bis den Container voll schreibt?
 

patrick_l

Hat es drauf

AW: CSS: Div verschiebt sich ungewollt beim Fenster skalieren

Du solltest dich nochmal mit den Grundlagen von HTML und CSS auseinandersetzen. ;)
Wenn ich das jetzt richtig sehe, kommt der rot markierte Bereich von der Navigation. Ich kann auch nicht nachvollziehen warum du dem UL eine Breite von 1200Px gibst.

Was jetzt deinen Contentbereich angeht. Wen du diesem keine fixe Höhe gibst, erweitert er sich automatisch bzw. passt sich dem jeweiligen Inhalt an. Für wenige Inhalte kann man dann noch min-height angeben.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.853
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben