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

_Reaper · 4. September 2013

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/...iverse-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

)
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

tic.tac · 4. September 2013

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.

Kausalat · 4. September 2013

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 · 4. September 2013

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

(war halt auch nur statisches html, da geht das ja noch

)

_Reaper · 4. September 2013

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 (4. September 2013)

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 (4. September 2013)

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

Kausalat · 4. September 2013

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.

Daaron · 4. September 2013

Nuck_Chorris schrieb:
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....

HiSkiller schrieb:
Ergänzung (4. September 2013)

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 (4. September 2013)

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

Bei deinem Schnipsel ist noch so viel unzulänglich, da lohnt sich das Aufzählen kaum. Fängt ja schon mit fehlendem DOCTYPE an.

Suche

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

_Reaper

Lt. Junior Grade

tic.tac

Lt. Commander

Kausalat

Gast

Nuck_Chorris

Lieutenant

_Reaper

Lt. Junior Grade

Kausalat

Gast

Daaron

Fleet Admiral

Ähnliche Themen