Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

cargos · 22-03-2010, 20:50

hallo forum.

ich arbeite mich gerade in html + css ein und würde gerne wissen was die sauberste art ist ein raster für bilder anzulegen.

mein vorhaben ist es in einer fixen breite von 968px mehrere bilder nebeneinander anzuzeigen.
(es sind je nach dem 2-4 bilder die einen abstand zueinander von 10px haben)

im grunde ist das layout so wie bei diesen polaroids mit einem rahmen und weißen fläche drunter:

wie macht man sowas?
ich hoffe jemand hat einen tipp für den einstieg.

grüße!

:: RK :: · 22-03-2010, 21:03

hi,

ich benutze mittlerweile so oft wie möglich YAML (http://www.yaml.de).
Ein XHTML/CSS Framework. Es bietet sehr viele Einsatzmöglichkeiten,
vor allem für das was du vorhast ist es sehr gut einzusetzen.

Wenn du täglich mit HTML und CSS zu tun hast wirst du solche Frameworks
sehr schätzen lernen, oder du schreibst dir dein eigenes. Aber warum das Rad
neu erfinden?

Mit YAML würde eine Zeile mit drei Spalten folgendermaßen aussehen:

HTML-Code:

<div class="subcolumns">
  <div class="c33l">
    <div class="subcl">Links</div>
  </div>
  <div class="c33l">
    <div class="subc">Mitte</div>
  </div>
  <div class="c33r">
    <div class="subcr">Rechts</div>
  </div>
</div>

Das kannst du nun beliebig oft untereinander kopieren. Die Aufteilung wäre hier
jeweils 33.333% pro Spalte.

Nightflyer · 22-03-2010, 23:07

Such mal nach float:left.

cargos · 22-03-2010, 23:42

Zitat:

Zitat von :: RK ::

HTML-Code:

<div class="subcolumns">
  <div class="c33l">
    <div class="subcl">Links</div>
  </div>
  <div class="c33l">
    <div class="subc">Mitte</div>
  </div>
  <div class="c33r">
    <div class="subcr">Rechts</div>
  </div>
</div>

Das kannst du nun beliebig oft untereinander kopieren. Die Aufteilung wäre hier
jeweils 33.333% pro Spalte.

hört sich gut an!

wie sieht denn das CSS zu den div classes aus?
grüße!

p.s. gibt es eigentlich nicht soetwas wie einen visuellen editor? wo man text und boxen positionieren kann und dann das passende HTML / CSS ausgegeben bekommt?

Nightflyer · 23-03-2010, 06:23

Gallery Float - CSS Discuss

**sonar** · 23-03-2010, 07:58

Eigentlich gehört sowas ja in ne Liste (<ul>), würd ich sagen…
(wie's ja auch in dem Beispiel von NF steht)

:: RK :: · 23-03-2010, 19:07

Zitat:

Zitat von cargos

hört sich gut an!

wie sieht denn das CSS zu den div classes aus?
grüße!

p.s. gibt es eigentlich nicht soetwas wie einen visuellen editor? wo man text und boxen positionieren kann und dann das passende HTML / CSS ausgegeben bekommt?

Doch gibts. Schau mal weiter unten auf der Startseite von http://www.yaml.de.
Da gibts den "YAML BUILDER". Damit kannst du dein Layout zusammenklopfen
und dir HTML sowie CSS Code generieren lassen.

Du solltest dich aber schon mit YAML und dessen Aufbau/Struktur auskennen
um es richtig benutzen zu können.

cargos · 24-03-2010, 04:19

danke euch!

eine frage noch:

wie kann man ein <div> innerhalb eines container zentrieren?

so will es leider nicht klappen:

Code:

 margin-left: auto; margin-right: auto; width:960px;

grüße

:: RK :: · 24-03-2010, 07:19

Zitat:

Zitat von cargos

wie kann man ein <div> innerhalb eines container zentrieren?

So kann mans machen

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Div zentrieren</title>
    <style type="text/css">
        #container {
            width: 900px;
            text-align: center;
            background-color: #f00;
        }
        
        #container div {
          width: 500px;
          margin: 0 auto;
          background-color: #00f;	
        }
    </style>
  </head>
  <body>
    <div id="container">
      <div>Hallo Welt</div>
    </div>
  </body>
</html>

cargos · 24-03-2010, 20:36

juchu damit gehts! danke!!

hat jemand vielleicht noch ein empfehlung für ein simpeles kontakt formular?
ich hab via google dieses gefunden:
> kirupa.com - PHP Contact Form

allerdings kann man dann nach dem abschicken durch einen reload der seite das immer wieder abschicken. hat jemand eine idee wie man das verhindern kann?

:: RK :: · 24-03-2010, 20:41

Zitat:

Zitat von cargos

juchu damit gehts! danke!!

hat jemand vielleicht noch ein empfehlung für ein simpeles kontakt formular?
ich hab via google dieses gefunden:
> kirupa.com - PHP Contact Form

allerdings kann man dann nach dem abschicken durch einen reload der seite das immer wieder abschicken. hat jemand eine idee wie man das verhindern kann?

Bau n Captcha ein ... z.B Recaptcha

22-03-2010, 20:50	#1 (permalink)
cargos squarepants™ Registriert seit: Nov 2009 Beiträge: 181	raster für bilder anlegen hallo forum. ich arbeite mich gerade in html + css ein und würde gerne wissen was die sauberste art ist ein raster für bilder anzulegen. mein vorhaben ist es in einer fixen breite von 968px mehrere bilder nebeneinander anzuzeigen. (es sind je nach dem 2-4 bilder die einen abstand zueinander von 10px haben) im grunde ist das layout so wie bei diesen polaroids mit einem rahmen und weißen fläche drunter: wie macht man sowas? ich hoffe jemand hat einen tipp für den einstieg. grüße! Geändert von cargos (22-03-2010 um 20:52 Uhr)

22-03-2010, 21:03	#2 (permalink)
:: RK :: Neuer User Registriert seit: Jan 2002 Ort: Umgebung Stuttgart Beiträge: 5.412	hi, ich benutze mittlerweile so oft wie möglich YAML (http://www.yaml.de). Ein XHTML/CSS Framework. Es bietet sehr viele Einsatzmöglichkeiten, vor allem für das was du vorhast ist es sehr gut einzusetzen. Wenn du täglich mit HTML und CSS zu tun hast wirst du solche Frameworks sehr schätzen lernen, oder du schreibst dir dein eigenes. Aber warum das Rad neu erfinden? Mit YAML würde eine Zeile mit drei Spalten folgendermaßen aussehen: HTML-Code: <div class="subcolumns"> <div class="c33l"> <div class="subcl">Links</div> </div> <div class="c33l"> <div class="subc">Mitte</div> </div> <div class="c33r"> <div class="subcr">Rechts</div> </div> </div> Das kannst du nun beliebig oft untereinander kopieren. Die Aufteilung wäre hier jeweils 33.333% pro Spalte. __________________ Das Glück im Leben hängt von den guten Gedanken ab, die man hat. Easing_Equations / Flash Kontaktformular / FlashPlugin W3C konform / Nützliche Beiträge zu FAQs Geändert von :: RK :: (22-03-2010 um 21:10 Uhr)

22-03-2010, 23:07	#3 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Such mal nach float:left. __________________ (\__/) (='.'=) (")_(")

23-03-2010, 06:23	#5 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Gallery Float - CSS Discuss __________________ (\__/) (='.'=) (")_(")

23-03-2010, 07:58	#6 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.621	Eigentlich gehört sowas ja in ne Liste (<ul>), würd ich sagen… (wie's ja auch in dem Beispiel von NF steht) __________________ RTFM Wie man Fragen richtig stellt. Achim Bindannmalweg Money makes the world go round, fear makes it turn much faster. (New Model Army)

24-03-2010, 04:19	#8 (permalink)
cargos squarepants™ Registriert seit: Nov 2009 Beiträge: 181	div zentrieren danke euch! eine frage noch: wie kann man ein <div> innerhalb eines container zentrieren? so will es leider nicht klappen: Code: margin-left: auto; margin-right: auto; width:960px; grüße

24-03-2010, 20:36	#10 (permalink)
cargos squarepants™ Registriert seit: Nov 2009 Beiträge: 181	juchu damit gehts! danke!! hat jemand vielleicht noch ein empfehlung für ein simpeles kontakt formular? ich hab via google dieses gefunden: > kirupa.com - PHP Contact Form allerdings kann man dann nach dem abschicken durch einen reload der seite das immer wieder abschicken. hat jemand eine idee wie man das verhindern kann?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Flash CS3] Bilder in einem Raster nacheinander und zufällig überblenden	The_Reverend	Flash Einsteiger	0	19-02-2010 11:58
PNG raster	harego	Flash MX 2004	4	16-03-2005 15:54
bilder in ein raster laden	dizzlwizzl	Flash MX	11	31-01-2005 17:29
Raster	MellonCollie	Flash MX	3	26-02-2004 16:10
raster	jig	ActionScript 1	7	11-11-2002 13:10