mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:48 Benutzername: Passwort: Auto-Login

Thema: Problem mit Div Layergröße vom 01.02.2011


Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem mit Div Layergröße
Seite: 1, 2  Weiter
Autor Nachricht
StreetGlow
Threadersteller

Dabei seit: 14.11.2005
Ort: Parchim
Alter: 41
Geschlecht: Männlich
Verfasst Di 01.02.2011 03:46
Titel

Problem mit Div Layergröße

Antworten mit Zitat Zum Seitenanfang

Hallo,
ich sitze gerade an ner webseite für einen bekannten und habe nun ein kleines problem bei dem ich nicht weiterkomme.
die site ist wiefolgt aus divs aufgebaut:
oben kommt der head,
darunter kommen zwei div-layer nebeneinander (menü & content)
unter den beiden kommt der footer.

wenn ich nun viel inhalt in den content-div schreibe dann ändert sich ja automatisch die höhe und man sieht wenn der menü-div zuende ist. Hier mal ein bild als beispiel was ich meine:


ich möchte aber gerne, dass die größe bleibt und dafür ein scrollbalken erscheint und man den inhalt scrollen kann.
auch dafür habe ich mal ein bild gebastelt damit ihr seht wie ich mir das vorstelle:


Hier ist der Code der Seite (URL der seite ist http://www.daemmtechnik-lossner.de/test/index.html) :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Mathias Hohmann" />
<meta name="description" content="Kerndämmung, Altbausanierung, Dachbeschichtung" />
<meta name="keywords" content="Lossner, Loßner, Dämmtechnik, Dämmung, Dachbeschichtung" />
<style type="text/css"><!--
body
{
 font-family:Verdana;
 font-size:12px;
 background-color:#ffffff;
 text-align:center;
 margin:0px;
}
h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}


a:link, a:visited, a:active, a:hover
{
  text-decoration:underline;
  font-weight:normal;
  color:#ff0000;
  font-size:12px;
}
a:active, a:hover
{
  color:#009999;
}
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #000;
 background-color:#737994;
 text-align:center;
 color:#eeeeee;
 text-decoration:none;
 }
a.menu:link, a.menu:visited
{
  color:#eeeeee;
 background-color:#737994;
 text-decoration:none; font-weight:bold;
}
a.menu:active, a.menu:hover
{
  color:#0000ff; font-weight:bold;
 background-color:#eeeeee;
}

#title {
height:85px;
padding:5px;
background-color:#ff0000;
border-bottom:1px solid #000;
}
#left {
background-color:#0000ff;
width:188px;
float:left;
}
.menutitle{
font-weight:bold;
text-align:center;
margin:2px;
}
.menucontainer {
border:1px solid #000;
background-color:#0099FF;
width:116px;
margin:30px;
}
#content {
border:1px solid #efeff7;
background-color:#ffffff;
width:550px;
float:right;
padding:0px 10px;
}
#footer {
heigth:85px;
padding:5px;
background-color:#0000FF;
}
//--></style>
<title>Loßner - Dämmtechnik</title>
</head>
<body>
<div style="width:760px;margin:10px auto;text-align:left;background-color:#ffffff;border:1px solid #000000;">
 <div id="title">
  <img src="images/head.png" style="width:640px;height:75px;margin-left:3px;" alt="Logo" />

 
 </div>

 <div id="left">
  <div class="menucontainer">
   <p class="menutitle">MENU 1</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>

   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  <div class="menucontainer">
   <p class="menutitle">MENU 2</p>

   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>
   <a class="menu" href="#">Hyperlink 5</a>
  </div>

  <div class="menucontainer">
   <p class="menutitle">MENU 3</p>
   <a class="menu" href="#">Hyperlink 1</a>
   <a class="menu" href="#">Hyperlink 2</a>
   <a class="menu" href="#">Hyperlink 3</a>
   <a class="menu" href="#">Hyperlink 4</a>

   <a class="menu" href="#">Hyperlink 5</a>
  </div>
 </div>

 <div id="content">
  <img src="images/dach.jpg" style="float:right;width:300px;height:405px"/>
  <h2 style="margin-top:10px;">Hier wird der Inhalt stehen.</h2>
   
  Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text Text Text Text
  Text Text Text Text Text Text Text Text Text Text Text Text



<p>&nbsp;</p>


</div>
<br style="clear:both;" />
<div id="footer">
 <img src="images/footer.png" style="width:640px;height:75px;margin-left:3px;" alt="Footer" />
</div>

</div>
</body>
</html>


ich würde mich sehr freuen wenn mir jemand weiterhelfen kann.

Gruß, Streetglow
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
bambam42

Dabei seit: 10.04.2007
Ort: Dessau
Alter: 59
Geschlecht: Weiblich
Verfasst Di 01.02.2011 06:40
Titel

Antworten mit Zitat Zum Seitenanfang

pack mal am anfang im CSS-Bereich folgendes

Code:

* {
margin:0;
padding:0;
}


Zuletzt bearbeitet von bambam42 am Di 01.02.2011 06:41, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 01.02.2011 09:21
Titel

Antworten mit Zitat Zum Seitenanfang

Entweder du suchst nach 'faux columns' oder du machst es so

http://jsfiddle.net/ZAe4f/
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 01.02.2011 09:30
Titel

Antworten mit Zitat Zum Seitenanfang

Traumhafte Seite. Ich glaub, langsam wirds Zeit den Hut zu nehmen.... ist ja nicht mehr auszuhalten hier.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 01.02.2011 09:33
Titel

Antworten mit Zitat Zum Seitenanfang

bacon hat geschrieben:
Traumhafte Seite. Ich glaub, langsam wirds Zeit den Hut zu nehmen.... ist ja nicht mehr auszuhalten hier.


Was stört Dich an dem Thema?
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 01.02.2011 09:34
Titel

Antworten mit Zitat Zum Seitenanfang

Das fachliche Niveau, Kash.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 01.02.2011 09:36
Titel

Antworten mit Zitat Zum Seitenanfang

bacon hat geschrieben:
Das fachliche Niveau, Kash.


Meine Lösung funktioniert. Und der Tipp mit den Faux Columns ist die einzigste Alternative.
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 01.02.2011 09:38
Titel

Antworten mit Zitat Zum Seitenanfang

Das war weniger auf Deine wie immer brillante Lösung bezogen als auf den ganzen, anlassgebenden Thread:

Zitat:
oben kommt der head,
darunter kommen zwei div-layer nebeneinander (menü & content)
unter den beiden kommt der footer.


Alter Schwede ....


Zuletzt bearbeitet von bacon am Di 01.02.2011 09:38, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Formmailer-Problem-neues problem
Problem in IE
Problem mit IE
CSS-Problem?
[CSS] IE Problem
ie7 problem?
Neues Thema eröffnen   Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.