CSS 100%-300px

TorrnexT · 06.10.2011, 20:32

Hallo,

ich habe ein kleines Design gemacht, das ich über den gesamten Bildschirm zieht (100%). An der linken Seite ist eine Navigation (300px breit).
Nun wird aber der Content der Seite (ausgegeben in der DIV-CLASS "main") mit 100% ausgegeben und div-main geht rechts am rand aus dem Bildschirm raus.

Code:

.navigation {
  width:280px;
  position:fixed;
  height:100%;
  color:#fff;
  background:#555;
  background-image:url(admin/design/images/nav_bg.gif);
  background-repeat:repeat-y;
  text-align:left;
  padding:10px;
  border-right-style:solid;
  border-color:#555;
  border-width:2px;
  font-size:12px;
}

.main {
  width:100%;
  position:fixed;
  left:255px;
  height:100%;
  color:#000;
  background-color:white;
  text-align:left;
  padding:10px;
  margin-right:1000px;
  font-size:12px;
}

Wie kann ich das nun so ändern, dass "main" gleich 100%-300px ist?

Danke schonmal im vorraus!

Gruß,
TorrnexT

nikosch · 06.10.2011, 20:38

Bitte vollständig posten.

TorrnexT · 06.10.2011, 20:42

CSS-Code

Zitat:

body {
padding:0px 0px 10px 0px;
margin:0px;
background-color:#f1f1f1;
background-position:center top;
background-repeat:no-repeat;
text-align:center;
font-family:tahoma, verdana, arial, sans-serif;
color:#2B2B2B;
}

a:link,
a:active,
a:visited {
color:#555;
font-weight:normal;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.navigation a:link,
.navigation a:active,
.navigation a:visited {
color:#fff;
font-weight:normal;
text-decoration:none;
}

.navigation a:hover {
text-decoration:underline;
}

.navigation {
width:230px;
position:fixed;
height:100%;
color:#fff;
background:#555;
background-image:url(design/images/nav_bg.gif);
background-repeat:repeat-y;
text-align:left;
padding:10px;
border-right-style:solid;
border-color:#555;
border-width:2px;
font-size:12px;
}

.main {
width:100%;
position:fixed;
left:255px;
height:100%;
color:#000;
background-color:white;
text-align:left;
padding:10px;
margin-right:1000px;
font-size:12px;
}

HTML-Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="design/style.css" />
  
<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}

//-->
</script>
</head>
<title>Administration</title>
<body>


<div class="navigation">
         <div style="border:#fff solid 1px; width:225px;">
         <a href="javascript:toggleDiv('user');" title="klick mich" style="display:block; padding:5px;">Benutzer-System</a>
         </div>
         <div id="user" style="display:none; border-left:#fff dashed 1px; border-right:#fff dashed 1px; border-bottom:#fff dashed 1px; margin-top:2px; padding:0px; padding-top:10px; padding-left:-20px; width:225px; text-align:left;">
         <ul>
           <li>Benutzer auflisten</li>
           <li>Neuer Benutzer</li>
         </ul>
         </div>
         
         <br/>
         <div style="border:#fff solid 1px; width:225px;">
         <a href="javascript:toggleDiv('support');" title="klick mich" style="display:block; padding:5px;">Support-System</a>
         </div>
         <div id="support" style="display:none; border-left:#fff dashed 1px; border-right:#fff dashed 1px; border-bottom:#fff dashed 1px; margin-top:2px; padding:0px; padding-top:10px; padding-left:-20px; width:225px; text-align:left;">
         <ul>
           <li>Tickets auflisten</li>
         </ul>
         </div>
</div>
<div class="main">

nikosch · 06.10.2011, 20:50

Zitat:

left:255px;

Zitat:

Die Angabe position: allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde. Die gewünschte abweichende Position müssen Sie zusätzlich angeben. Dies können Sie beispielsweise mit Angaben für nach unten top, nach unten left, nach unten bottom oder nach unten right tun.

Wenn Sie also beispielsweise position:absolute; top:30px angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von static abweichend positionierten Vorfahrenelements beginnt.

Zitat:

width:100%;

Ein Blockelement nimmt immer den gesamten verfügbaren Platz horizontal ein.

TorrnexT · 06.10.2011, 20:56

mmh klappt irgendwie nicht :O

Zitat:

body {
padding:0px 0px 10px 0px;
margin:0px;
background-color:#f1f1f1;
background-position:center top;
background-repeat:no-repeat;
text-align:center;
font-family:tahoma, verdana, arial, sans-serif;
color:#2B2B2B;
}

a:link,
a:active,
a:visited {
color:#555;
font-weight:normal;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.navigation a:link,
.navigation a:active,
.navigation a:visited {
color:#fff;
font-weight:normal;
text-decoration:none;
}

.navigation a:hover {
text-decoration:underline;
}

.navigation {
width:230px;
position:fixed;
height:100%;
color:#fff;
background:#555;
background-image:url(http://mediaworldz.com/site/admin/de...s/nav_bg.gif);
background-repeat:repeat-y;
text-align:left;
padding:10px;
border-right-style:solid;
border-color:#555;
border-width:2px;
font-size:12px;
}

.main {
width:100%;
position:fixed;
left:255px;
height:100%;
color:#000;
background-color:white;
text-align:left;
padding:10px;
font-size:12px;
left:255px;
}

Chriz · 06.10.2011, 21:14

http://builder.yaml.de/

nikosch · 06.10.2011, 21:25

Zitat:

mmh klappt irgendwie nicht :O

Was „klappt nicht“? Von meinen Hinweisen hast Du doch keinen beachtet..

TorrnexT · 06.10.2011, 21:35

Doch ich habe doch folgendes gemacht:

Code:

.main {
  width:100%;
  position:absolute;
  left:255px;
  height:100%;
  color:#000;
  background-color:white;
  text-align:left;
  padding:10px;
  font-size:12px;
  left:255px;
}

Jedoch klappt dies nicht, sprich "main" geht immer noch rechts "aus dem Bildschirm raus". Wenn Sie das nicht meinten, dann habe ich Sie falsch verstanden.

Gruß,
TorrnexT

hummer · 06.10.2011, 21:52

Breitenangabe entfernen.

Zitat:

Zitat von nikosch

Ein Blockelement nimmt immer den gesamten verfügbaren Platz horizontal ein.

nikosch · 06.10.2011, 22:11

Richtig. Und beim anderen Zitat ist die relevante Stelle:

Zitat:

seines nächsten von static abweichend positionierten Vorfahrenelements

Es darf übrigens geduzt werden.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

06.10.2011, 20:32
TorrnexT Benutzer Registriert seit: 23.04.2011 Beiträge: 71 PHP-Kenntnisse: Anfänger	CSS 100%-300px Hallo, ich habe ein kleines Design gemacht, das ich über den gesamten Bildschirm zieht (100%). An der linken Seite ist eine Navigation (300px breit). Nun wird aber der Content der Seite (ausgegeben in der DIV-CLASS "main") mit 100% ausgegeben und div-main geht rechts am rand aus dem Bildschirm raus. Code: .navigation { width:280px; position:fixed; height:100%; color:#fff; background:#555; background-image:url(admin/design/images/nav_bg.gif); background-repeat:repeat-y; text-align:left; padding:10px; border-right-style:solid; border-color:#555; border-width:2px; font-size:12px; } .main { width:100%; position:fixed; left:255px; height:100%; color:#000; background-color:white; text-align:left; padding:10px; margin-right:1000px; font-size:12px; } Wie kann ich das nun so ändern, dass "main" gleich 100%-300px ist? Danke schonmal im vorraus! Gruß, TorrnexT Geändert von TorrnexT (06.10.2011 um 20:42 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.10.2011, 20:38
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Bitte vollständig posten. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

06.10.2011, 21:14
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	http://builder.yaml.de/ __________________ "Nuschel ich?" - "Was?"

06.10.2011, 21:35
TorrnexT Benutzer Registriert seit: 23.04.2011 Beiträge: 71 PHP-Kenntnisse: Anfänger	Doch ich habe doch folgendes gemacht: Code: .main { width:100%; position:absolute; left:255px; height:100%; color:#000; background-color:white; text-align:left; padding:10px; font-size:12px; left:255px; } Jedoch klappt dies nicht, sprich "main" geht immer noch rechts "aus dem Bildschirm raus". Wenn Sie das nicht meinten, dann habe ich Sie falsch verstanden. Gruß, TorrnexT Geändert von TorrnexT (06.10.2011 um 21:41 Uhr).