Faux Columns Grafik wird nicht angezeigt

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

AlexLarge

Neues Mitglied
22 September 2015
2
0
1
29
Hallo

Ansonsten programmiere ich meine Layouts immer selber, aber diesmal habe ich echt Probleme.

Ich habe mit einem Layout Generator ein 2 spaltiges Layout gemacht, eine Spalte links ( Navigation, Breite in Pixel ) , und eine rechts ( Inhalt, Rest der Breite in % ), kein Kopf / Header, auch kein Fuss / Footer, nur links und rechts, die Seite soll 100% breit sein. Die Seite soll man als Ganzes scrollen können, falls der Inhalt lang wird, man soll weder die linke, noch die rechte Spalte scrollen können, sondern die ganze Seite.

Ich habe eine Hintergrundgrafik ( Faux Columns ) gemacht, doch diese wird nicht angezeigt. Wo liegt das Problem?!

Da ich es nicht zustande gebracht habe das Layout selbst zu programmieren, habe ich einen Layout Generator benutzt, und das passt mir nicht, da wird noch eine reset.css Datei benötigt.

Am besten wäre es, wenn mir jemand ein solches Layout programmieren könnte, ich wäre sehr dankbar.

Und hier noch die Seite, welche ich mit einem Layout Generator gemacht habe, Faux Columns Grafik in der CSS Datei deklariert, doch diese wird nicht angezeigt. Strg + U drücken um den Quellcode der Seite zu betrachten!

http://alexlarge.lima-city.de/test.html

Freundliche Grüsse
 

djheke

Aktives Mitglied
8 Februar 2012
924
84
28
Das Ganze geht auch Grafik.
Code:
<!DOCTYPE html>
<html class=""><head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {
margin:0;
padding:0;
}
html , body {
height:100%;
}
html {
background:#333;
}
#seite {
min-height:100%;
max-width:1000px;
background:#0167ce;
margin:0 auto;
position:relative;
overflow:hidden;
}
#seite:before {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:320px;
background:#d96d00;
border:10px #458c00;
border-style:none solid;
}
#inhalt {
margin-left: 360px;
background:#0167ce;
}
#navigation {
float: left;
width: 340px;
position:relative;
}
p {
padding:10px 20px;
color:white;
}
</style>
</head>
<body>
<div id="seite">
<div id="navigation">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.</p>
</div>
<div id="inhalt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.</p>
</div>
</div>
</body></html>
 
Zuletzt bearbeitet:
Werbung: