Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Pixel und Prozent in DIV-Layout kombinieren

Frage Entwicklung CSS

Mitglied: DennisStuggi

DennisStuggi (Level 1) - Jetzt verbinden

22.12.2010 um 10:15 Uhr, 7457 Aufrufe, 6 Kommentare

Hallo zusammen,

es geht um folgendes Problem:
Ich habe ein Layout, bestehend aus 3 div Elementen, die nebeneinander angeordnet sind. (Siehe angehängtes Bild)
Das linke (schwarz) und das rechte (grün) div Element haben eine feste Breite in px, was wegen Grafiken notwendig ist.
Das mittlere (rot) div soll den Platz so ausfüllen, dass der gesamte Bildschirm eingenommen wird.

d41952add603cdf140071d0bfe9da95a - Klicke auf das Bild, um es zu vergrößern

Weise ich dem roten div keine Breite zu, füllt es nur den Platz, der vom Text darin benötigt wird.
Eine Pixel oder Prozent Breite kann ich aber auch nicht geben, da die benutzer ja unterschiedliche Auflösungen haben.
Weise ich zb. die Breite 70% zu, sieht auf einem 1280x1024 Monitor alles gut aus, auf einem 1024x768 Monitor jedoch steht das rechte div dann unter dem Inhalt.

Kann mir jemand helfen, wie ich es hinbekomme, dass das schwarze und das grüne div Element eine feste Pixel-Breite haben und das rote div den restlichen Platz des Bildschirms ausfüllt?

Vielen Dank schon jetzt für alle antworten.



Der Html-Code:
01.
  
02.
<div id="container"> 
03.
<div id="nav-left"> 
04.
</div> 
05.
<div id="content"> 
06.
</div> 
07.
<div id="nav-right"> 
08.
</div> 
09.
</div>
Der CSS-Code:
01.
  
02.
#container { 
03.
width:100%; 
04.
05.
 
06.
#nav-left { 
07.
width:120px; 
08.
padding-left:30px; 
09.
float:left; 
10.
background-image:url(nav_left.jpg); 
11.
12.
 
13.
#content { 
14.
float:left; 
15.
16.
 
17.
# nav-right { 
18.
float:right; 
19.
width:280px; 
20.
background-image:url(nav-right.jpg); 
21.
}
Mitglied: KennyNet
22.12.2010 um 12:02 Uhr
Hallo DennisBauer,

schon mal probiert das einfach per width:auto umzusetzen ?
Oder falls eine gewisse Mindestbreite des Content eingehalten werden soll per min-width: ... px ?


Gruß...
Bitte warten ..
Mitglied: DennisStuggi
22.12.2010 um 12:57 Uhr
Hi KennyNet,

width:auto hat den gleichen Effekt, wie wenn ich es ganz weglasse:
Der Content nimmt nur die Breite ein, die von text usw. benötigt wird.

min-width ist eigentlich eher eine Notlösung, da ich es so flexibel wie möglich gestalten will.
Bitte warten ..
Mitglied: LennyLinux
23.12.2010 um 15:05 Uhr
Hallo DennisBauer,

ich würde dir hier empfehlen nur mit Prozentangaben zu arbeiten. Das wird dann auch wirklich vom Browser so aufgelöst und die Fehleranfälligkeit ist relativ gering.

Ich habe mal auf die Schnell deine 3 divs positioniert: Hier die CSS-Datei:

01.
 
02.
#contentContainer { 
03.
 
04.
    /* border: 5px solid gray; */ 
05.
    height: 99%; 
06.
    width: 99%; 
07.
    min-width: 1200px; 
08.
    margin: 0px 0px 0px 0px; 
09.
10.
 
11.
 
12.
#content { 
13.
 
14.
 
15.
    height: auto; 
16.
    width: 60%; 
17.
    background-color: yellowgreen; 
18.
    min-width: 50%; 
19.
    float: left; 
20.
    margin: 0px 0px 0px 15px; 
21.
    padding: 10px 5px 5px 15px; 
22.
 
23.
24.
 
25.
 
26.
 
27.
#navLeft { 
28.
 
29.
    height: 600px; 
30.
    width: 200px; 
31.
    border: 1px solid blue; 
32.
    float: left; 
33.
 
34.
 
35.
 
36.
 
37.
38.
 
39.
#infoRight { 
40.
 
41.
    height: 99%; 
42.
    width: 230px; 
43.
    /*border: 1px solid blue; */ 
44.
    float: right; 
45.
    border-left: 1px dashed #031839; 
46.
 
47.
 
48.
 
49.
50.
 
51.
 
In der HTML-Datei solltest du es dann so anordnen:

01.
<div id="contentContainer"> 
02.
    <div id="infoRight"></div> 
03.
     <div id="navLeft"></div> 
04.
     <div id="content></div> 
05.
</div> 
06.
 
Probier das einfach mal aus. Müsste klappen.

Grüße Tippexs
Bitte warten ..
Mitglied: DennisStuggi
23.12.2010 um 15:34 Uhr
Danke für deine Hilfe.
Das funktioniert aber auch nicht (so hatte ich es bereits)
Ist die Auflösung gering (z.B. Netbook), wird der rechte Container unterhalb des Inhalts dargestellt.
Bitte warten ..
Mitglied: LennyLinux
25.12.2010 um 10:52 Uhr
Mit was für einem Browser hast du es getestet??

Versuch mal folgende Zeile einzubauen. Bei mir funktioniert das Layout, wie du es möchtest ohne Probleme

01.
 
02.
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
03.
 
04.
 
Bitte warten ..
Mitglied: DennisStuggi
25.12.2010 um 17:01 Uhr
Internet Explorer 8 und Firefox 3.6

Werde es jetzt vorerst so machen, dass ich nur ein min-width beim content einfüge.
Und zwar so breit, dass die Webseite auf Netbooks richtig dargestellt wird.

Bei größeren Auflösungen füllt dann das content div halt nicht die gesamte Breite aus, sondern nur so viel, wie vom Text benötigt wird.


Wenn jemand noch Vorschläge hat, wie ich das besser lösen kann, immer her damit.
Bitte warten ..
Ähnliche Inhalte
CSS
Bräuchte Unterstützung bei einem Floating-DIV-Layout
Frage von CodehunterCSS11 Kommentare

Hallo Kollegas ;-) Hier seht ihr einen Rasterentwurf für ein Floating DIV Layout: Ich zerbreche mir ein bisschen den ...

Google Android
Google stellt Pixel-Smartphones Pixel 2 und Pixel 2 XL vor
Information von FrankGoogle Android6 Kommentare

Heute Abend hat Google die zweiten Generation seiner Pixel-Smartphones vorgestellt: Pixel 2 und Pixel 2 XL. Das kleine Pixel ...

Google Android
Pixel kann kein VPN zur Fritzbox herstellen! Finger weg von Google Pixel!
Frage von MyApps2GO.deGoogle Android5 Kommentare

Hallo zusammen, ich hab das Problem, dass ich mit dem Google Pixel (Android 7.1) keine Verbindung zur einer FritzBox ...

Batch & Shell
Batches kombinieren
Frage von stridingBatch & Shell1 Kommentar

Hallo! Ich stehe mal wieder vor einem "Problem", das ich leider nicht gelöst bekomme. Vor einiger Zeit habe ich ...

Neue Wissensbeiträge
DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 50 MinutenDSL, VDSL

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Windows 10

Microsoft bestätigt DMA-Policy-Problem in Win10 v1709

Information von DerWoWusste vor 1 StundeWindows 10

Wer sein Gerät mit der DMA-Policy absichert, bekommt evtl. Hardwareprobleme in v1709 von Win10. Warum? Weil v1709 endlich "richtig" ...

Verschlüsselung & Zertifikate

Die Hölle friert ein weiteres Stück zu: Microsoft integriert OpenSSH in Windows

Information von ticuta1 vor 4 StundenVerschlüsselung & Zertifikate

Interessant Die Hölle friert ein weiteres Stück zu: Microsoft integriert OpenSSH in Windows SSH-Kommando in CMD.exe und PowerShell

Apple

IOS 11.2.1 stopft HomeKit-Remote-Lücke

Tipp von BassFishFox vor 1 TagApple

Das Update für iPhone, iPad und Apple TV soll die Fernsteuerung von Smart-Home-Geräten wieder in vollem Umfang ermöglichen. Apple ...

Heiß diskutierte Inhalte
Windows Server
RODC kann nicht aus Domäne entfernt werden
Frage von NilsvLehnWindows Server19 Kommentare

HAllo, ich arbeite in einem Universitätsnetzwerk mit 3 Standorten. Die Standorte haben alle ein ESXi Cluster und auf diesen ...

Hardware
Kein Bild mit nur einer bestimmten Grafikkarten - Mainboard Konfiguration
gelöst Frage von bestelittHardware18 Kommentare

Hallo zusammen, ich hatte schon einmal eine ähnliche Frage gestellt. Damals hatte ich genau das gleiche Problem. Allerdings lies ...

Netzwerkmanagement
Mehrere Netzwerkadapter in einem PC zu einem Switch zusammenfügen
Frage von prodriveNetzwerkmanagement17 Kommentare

Hallo zusammen Vorweg, ich konnte schon einige IT-Probleme mit Hilfe dieses Forums lösen. Wirklich klasse hier! Doch für das ...

Hardware
Links klick bei Maus funktioniert nicht
gelöst Frage von Pablu23Hardware16 Kommentare

Hallo erstmal. Ich habe ein Problem mit meiner relativ alten maus jedoch denke ich nicht das es an der ...