andyah
Goto Top

In Webside farbige Balken erzeugen

Hi NG,

ich möchte in einer Webside je oben, links und rechts einen farbigen Balken haben. Das ganze soll wie ein H aussehen, nur das der obere Balken nicht in der Mitte sitzen soll.

Aussehen:

aaaaaa---------------------------ccccccc
aaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbccccccc
aaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbccccccc
aaaaaa---------------------------ccccccc
aaaaaa---------------------------ccccccc
aaaaaa---------------------------ccccccc

a = linker Balken
b = oberer Balken
c = rechter Balken
- = leere Fläche

Wie bekomme ich das hin?

Gruß
Andy

Content-Key: 203021

Url: https://administrator.de/contentid/203021

Ausgedruckt am: 28.03.2024 um 10:03 Uhr

Mitglied: d4shoerncheN
d4shoerncheN 08.03.2013 aktualisiert um 10:55:05 Uhr
Goto Top
Hallo,

tut mir Leid - irgendwie versteh ich dein Vorhaben nicht so ganz.

Du möchtest auf deiner Internetseite einen Buchstaben formen, anhand von farbigen Balken?!

Am einfachsten erstellst du dir drei <div-container> und gibst diesen Namen.
<div id="linker-balken"></div>  
<div id="mittlerer-balken"></div>  
<div id="rechter-balken"></div>  

In CSS formatierst du dir die Balken. Breiten- / und Höhenangaben, Hintergrundsfarbe und Position. Dazu einfach im Netz ein wenig nach CSS-Befehlen suchen.

Du kannst dir ein Wunsch-H auch als Grafik erstellen und diese als Hintergrundsbild auf deiner Homepage einfügen.

Gruß
@d4shoerncheN
Mitglied: aqui
aqui 08.03.2013 um 10:49:03 Uhr
Goto Top
Selfhtml hilft dir da sicher weiter:
http://de.selfhtml.org
Mitglied: 110135
110135 08.03.2013 um 10:49:11 Uhr
Goto Top
Hallo,

da gibts einige Möglichkeiten.

z.B.
-Grafiken
-Frames
-Tabellen
-DIV-Layer.

Da braucht es schon ein wenig mehr Input. Was willst du damit bezwecken? Wie sollen die Bereiche genau angeordnet sein (fix oder nicht)...
Mitglied: colinardo
colinardo 08.03.2013 aktualisiert um 12:16:13 Uhr
Goto Top
um uns weitere Fragen zu ersparen, hier eine mögliche Lösung womit du anfangen könntest:
<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<title>Test</title>
<style type="text/css"> 
#linker-balken {
	height: 200px;
	width: 50px;
	top:0px;
	position:absolute;
	left:0px;
	background-color:#0CC;
}
#rechter-balken {
	height: 200px;
	width: 50px;
	top:0px;
	position:absolute;
	right:0px;
	background-color:#0CC;
}
#mittlerer-balken {
	height: 50px;
	width: auto;
	position:absolute;
	top:50px;
	left:60px;
	right:60px;
	background-color:#963;
}
</style>
</head>

<body>
<div id="linker-balken"></div> 
<div id="mittlerer-balken"></div> 
<div id="rechter-balken"></div> 
</body>
</html>
Mitglied: AndyAh
AndyAh 08.03.2013 um 12:45:19 Uhr
Goto Top
Hi colinardo,

danke für den Tipp. Genau das habe ich gesucht.

Gruß
Andy