HTML Schicke Webside via html (halb transparente, runde boxen)

_Reaper

Lt. Junior Grade
Dabei seit
Juni 2010
Beiträge
441
hi hi :)
Bräuchte mal hilfe. ich will eine auf html basierte seite "schreiben".
Die Seite soll ein background haben ( http://www.wallsave.com/wallpapers/1920x1080/sea-stars/911506/sea-stars-galaxy-universe-andromeda-nebula-hd-desktop-911506.jpg )
und soll am rand "boxen" für z.b. login etc. haben.
in der mitte der seite soll eine normale "oberfläche" sein (so zu sagen eine große box :D )
Nun kommt ihr ins Spiel. Währe echt nett wenn ihr mir helfen könntet, die "boxen" am rand halb transparent und die große nicht transparent zu machen bzw. ich weiss auch nicht wirklich wie man "boxen" macht.
die mittlere box sollte in etwa so sein (von der größe etc) wie die von cb.
Über hilfe würde ich mich wirklich sehr freuen.
PS: die seite wird nicht veröffentlicht also keine Angst :D
 

tic.tac

Lt. Commander
Dabei seit
Nov. 2010
Beiträge
1.802
Ich bin kein Freund von "Hausaufgaben für jemand anderen machen", deswegen zeig uns doch erstmal, was du wie machen würdest und dann kann man zusammen weiterhelfen. Das ist ja der Sinn eines Forums. Keiner wird dich dafür verurteilen oder auslachen. Desweiteren empfehle ich immer noch gerne die Seite http://de.selfhtml.org/

Ich glaube damit hat jeder angefangen, der sich ernsthaft mit Websites auseinandersetzt.

Wenn du natürlich gar keine Ahnung hast, kämen CMS-Systeme wie Joomla (userfreundlich) oder Typo3 (eher professionell) mit x-beliebigen Templates für dich in Frage.
 
K

Kausalat

Gast
Hast du überhaupt jegliche HTML- und CSS-Kentnisse? Hast du dich auf einschlägigen Websites über deren Syntax und deren Möglichkeiten informiert? Oder sollen wir für dich die komplette Arbeit übernehmen?
 

Nuck_Chorris

Lieutenant
Dabei seit
Okt. 2009
Beiträge
1.000
zu meiner Zeit hat man das mit <div> und halbtransparenten 1px großen .png bildern gelöst.
Zu meiner Zeit entspricht HTML 4 Zeiten und blutigem anfänger Niveau ;)

Moderne Menschen machen das mit Wordpress, Joomla und wie sie nicht alle heißen.
via google findet man auch recht viele how-tos und tutorials.

Selfhtml.org gibt es auch noch, fand ich immer ätzend... bäh... ich habe mir dann immer eine Seite gesucht die etwa das hatte was ich wollte, - ein Blick auf den Code und dann mit dem "OHHHHHH AHHHHH ACH SOOOO" moment das verstehen erkauft :evillol:
(war halt auch nur statisches html, da geht das ja noch ;) )
 

_Reaper

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Juni 2010
Beiträge
441
Also ich hab jetz folgendes schonmal:

<html><head>
<title>ABCDEFG</title>
</head>

<div style="background-color:white;
width: 400px;
height: 100px;
margin: 100px;
opacity: 1;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
">
INHALT
</div>
<body background="background.jpg">
</body>
</html>
Ergänzung ()

Ich hab mich eben etwas komisch ausgedrückt sry^^ ich meinte so zu sagen eine weisse box (erstma ne kleine am rand)
die einen durchsichtigen rahmen hat (weiss und opacity: 0.5;)
Ergänzung ()

syntax etc. sind mir relativ bekannt, beherrsche sie zwar nicht perfekt aber.... :D
 
K

Kausalat

Gast
Das merkt man deinem Quelltext leider an. Der Div-Container zwischen <head> und <body> ist nur ein Beweis dafür, dass du dir wirklich erst einmal Grundkenntnisse aneignen solltest, bevor du Hals über Kopf irgendwelchen invaliden Quellext hinklatschst.

Die grundsätzliche Idee hinter deinem Design wären drei große Containerelemente, die je nach Gusto nebeneinander gefloatet oder als inline-block dargestellt werden. Je nach Anwendungsgebiet kann man alle drei Container in einen übergeordneten Container packen, falls man für die gesamten Seite eine maximale Breite angeben möchte.

Um deinen Hintergrund teiltransparent zu bekommen, benötigst du die CSS-Anweisung background: rgba(255,255,255,0.5);, wobei der letzte Wert den Grad der Transparenz angibt.

Und nun bist du wieder dran.
 
Zuletzt bearbeitet:

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
zu meiner Zeit hat man das mit <div> und halbtransparenten 1px großen .png bildern gelöst.
Zu meiner Zeit entspricht HTML 4 Zeiten und blutigem anfänger Niveau ;)
Die 1px-PNGs kann man immer noch nutzen, viel effizienter ist es aber meist, wenn man auf IE<=8 scheißt und direkt die RGBA/HSLA-Notation von CSS3 nutzt.
Divs sinds immer noch... nun, außer natürlich syntaktisch wäre <section>,<aside>,<article>,... besser.

Moderne Menschen machen das mit Wordpress, Joomla und wie sie nicht alle heißen.
Die Verwendung eines CMS ändert doch nix daran, dass man die Struktur von HTML-Dokumenten und die verschiedenen Styling-Opitionen per CSS kennen muss.
Auch mit Wordpress ist es immer noch ein <div> mit halbtransparentem 1px-Hintergrundbild....

Ergänzung ()

Ich hab mich eben etwas komisch ausgedrückt sry^^ ich meinte so zu sagen eine weisse box (erstma ne kleine am rand)
die einen durchsichtigen rahmen hat (weiss und opacity: 0.5;)
Opacity? Nette Idee, wird aber nicht gehen. Die Deckkraft wird rekursiv übergeben. Hier wird nicht nur dein Hintergrund (oder dein Rahmen) halbtransparent, sondern auch sämtlicher Inhalt.


Ergänzung ()

syntax etc. sind mir relativ bekannt, beherrsche sie zwar nicht perfekt aber.... :D
Bei deinem Schnipsel ist noch so viel unzulänglich, da lohnt sich das Aufzählen kaum. Fängt ja schon mit fehlendem DOCTYPE an.
 
Top