php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 06.10.2011, 20:32  
Benutzer
 
Registriert seit: 23.04.2011
Beiträge: 71
PHP-Kenntnisse:
Anfänger
TorrnexT befindet sich auf einem aufstrebenden Ast
Standard 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).
TorrnexT ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 06.10.2011, 20:38  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

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.
--
nikosch ist offline   Mit Zitat antworten
Alt 06.10.2011, 20:42  
Benutzer
 
Registriert seit: 23.04.2011
Beiträge: 71
PHP-Kenntnisse:
Anfänger
TorrnexT befindet sich auf einem aufstrebenden Ast
Standard

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">
TorrnexT ist offline   Mit Zitat antworten
Alt 06.10.2011, 20:50  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

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.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 06.10.2011, 20:56  
Benutzer
 
Registriert seit: 23.04.2011
Beiträge: 71
PHP-Kenntnisse:
Anfänger
TorrnexT befindet sich auf einem aufstrebenden Ast
Standard

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;
}
TorrnexT ist offline   Mit Zitat antworten
Alt 06.10.2011, 21:14  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.266
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard

http://builder.yaml.de/
__________________
"Nuschel ich?" - "Was?"
Chriz ist offline   Mit Zitat antworten
Alt 06.10.2011, 21:25  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Zitat:
mmh klappt irgendwie nicht :O
Was „klappt nicht“? Von meinen Hinweisen hast Du doch keinen beachtet..
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 06.10.2011, 21:35  
Benutzer
 
Registriert seit: 23.04.2011
Beiträge: 71
PHP-Kenntnisse:
Anfänger
TorrnexT befindet sich auf einem aufstrebenden Ast
Standard

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).
TorrnexT ist offline   Mit Zitat antworten
Alt 06.10.2011, 21:52  
Benutzer
 
Registriert seit: 14.08.2008
Beiträge: 41
PHP-Kenntnisse:
Anfänger
hummer befindet sich auf einem aufstrebenden Ast
Standard

Breitenangabe entfernen.
Zitat:
Zitat von nikosch
Ein Blockelement nimmt immer den gesamten verfügbaren Platz horizontal ein.
hummer ist offline   Mit Zitat antworten
Alt 06.10.2011, 22:11  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Richtig. Und beim anderen Zitat ist die relevante Stelle:
Zitat:
seines nächsten von static abweichend positionierten Vorfahrenelements
Es darf übrigens geduzt werden.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
weight 100%- 300px, css 100%-300px, css 300px =, height:100% - 300px css, css website bei 300 px anpassen, css prozent bildschirm unter 300px, wight 300px

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:36 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum