| Autor |
Nachricht |
Gnulf
Threadersteller
Dabei seit: 05.09.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 16.11.2011 19:35
Titel CSS gekreuzte Farbbalken - wie geht das? |
  |
|
Hallo,
vorweg: ich bin ein blutiger Anfänger in CSS und HTML. Ich bin gerade am Erlernen und mit selbst gestellten Übungen beschäftigt.
Folgendes Problem habe ich mir gestellt: Ich habe einen Container definiert, und möchte in diesem Container zwei sich kreuzende Farbbalken darstellen, die jeweils von einem Rand des Containers zum anderen verlaufen (also Balken1 von ganz oben nach ganz unten, Balken2 von ganz links nach ganz rechts). Wie kriege ich es hin? Mit meiner Lösung (ich habe schon anderes ausprobiert) schließt der eine Balken an den anderen an, sie überkreuzen sich jedoch nicht.
| 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" xml:lang="de" lang="de">
<head>
<title>Balkenversuch</title>
<style type="text/css">
.container {
margin:0;
padding:0;
display:block;
margin-left:auto;
margin-right:auto;
background-color: #14DFED;
height: 800px;
overflow: auto;
width: 1000px;
padding: 0px;
top: 0px;
}
#Balken1 {
width: 100px;
height: 600px;
background: #C3DDC5;
margin:0;
padding: 0px;
margin-left: 60px;
}
#Balken2 {
width: 1000px;
height: 30px;
background: #C3DDC5;
margin:0;
padding: 0px;
margin-left: 0px;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="container">
<div id="Balken1"><div id="Balken2">
</div></div></div>
</body>
</html>
|
[/quote]
Vielen Dank und liebe Grüße
Gnulf
|
|
| |
  |
 |
mokleini
Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: 
|
Verfasst Mi 16.11.2011 20:52
Titel
|
|
|
das problem ist, dass du das div "balken1" nicht schließt.
[code]<div class="container">
<div id="Balken1"></div>
<div id="Balken2"></div>
</div>[/code]
#balken1 muss dann natürlich noch so hoch sein wie .container, nämlich 800px.
#balken2 bekommt dann kein margin-top mehr, und overflow:auto verschwindet aus dem .container
dann hast du in etwa das, was du wolltest. wenn es ein richtiges kreuz werden soll, dann musst du #balken 2 ein negatives margin-top geben, z.B. margin-top:-385px
|
|
| |
|
|
|
Anzeige
|
|
|
Gnulf
Threadersteller
Dabei seit: 05.09.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 16.11.2011 21:33
Titel
|
|
|
|
Mercy! Kurze Antworten sind meist die, welche einem prompt einiges klar machen.... Vielen Dank!!
|
|
| |
|
|
| |
|
|
Willkommen auf dem Portal für Mediengestalter
