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

Frau Mayer · 21-04-2011, 12:20

Moin!
Ich lege grade eine neue Site mit diesem Layout an.

Das Bild ("FERNISSASCH") links soll immer stehenbleiben, rechts daneben steht das Hauptmenü und davon rechts ist das Untermenü (hier: Namen).

Erste Frage: wie muss es in der CSS lauten, damit die drei Bereiche nebeneinander stehen?

Zweite Frage: Pro Name gibt es mehrere Fotos und Bildunterschriften. Kann ich da über die Zahlen (hier: 1-4) zu den anderen Fotos springen, ohne alles neu zu laden?

Ich habe folgenden Code aus einer anderen Site von mir genommen (Maße sind noch falsch):

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
font: 70% Verdana, Arial, sans-serif;
text-align: left;
color:#666;
background-color: #000;
}

#container {
margin: 1em auto;
width: 1000px;
height: 600px;
text-align: left;
background-color: #ffffff;

}

#abstand1 {
width:1000;
height:20px;
margin-top:0px;
background-color: #000;
}

#kopf {
width:1000;
height:10px;
margin:0;
background-color: #ffffff;
}

#hauptnav {
width:1000;
height:45px;
margin-top:0px;
background-color: #ffffff;
}

#abstand {
width:1000;
height:12px;
margin-top:0px;
background-color: #ffffff;
}

#zweitnav {
width: 205px;
height:500px;
margin: 0px 0px 0px 89px;
background-color: #006699;
}

#inhalt {
height:500px;
background-color: #ffffff;

}

#abstand2 {
width:900;
height:12px;
margin-top:0px;
background-color: #ffffff;
}

#fuss {
height:37px;
background-color: #ffffff;
/*margin-left:180px;*/
}

#abstand3 {
width:1000;
height:8px;
margin-top:0px;
background-color: #ffffff;
}

inhalth1 {

}

inhalth2 {

}

inhalth3 {

}

inhaltcopy1 {

}

Dankeschööön...

Nightflyer · 21-04-2011, 12:33

Kannst du noch den HTML-Code den du benutzt beilegen?

Frau Mayer · 21-04-2011, 12:37

Der ist aber ziemlich verhunzt...

<!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>Fernissasch!</title>
<link rel="stylesheet" type="text/css" href="layout.css">
<style type="text/css">

</style>

</head>
<div id="container">

<div id="abstand1">
</div>

<div id="kopf"></div>

<div id="hauptnav"><a href="gestecke_tyr.html"></div>

<div id="abstand"></div>

<div id="zweitnav">
<p><br />
<strong>Menü 1</strong><br />
<a href="gestecke_maus.html">Menü 2</a><br />

<p> </p>
<p> </p>
<p>  </p>
<table width="170" height="134" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="134"> </td>
<td width="145" valign="top">Text text text </td>
</tr>
</table>
<p><br />
</p>
</div>

<div id="inhalt">
<inhalth1><br />
<br />
</inhalth1>
<br />
<inhalth2>
<p>Text text text <br />

</p>
</div>

<div id="abstand2"></div>

<div id="fuss"></div>

<div id="abstand3"></div>

</div>

</body>
</html>

Nightflyer · 21-04-2011, 14:31

So jetzt mal ausgehend davon:

HTML-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"> 

<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="http://code.jquery.com/jquery-1.5.js"></script>
	<style type="text/css">

	*{
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;

	}

	body{
		background-color: #CCC;
	}

	#container{
		margin: 50px;
		min-height: 600px;
		background-color: #FFF;
		-moz-box-shadow: 10px 10px 5px #888;
		-webkit-box-shadow: 10px 10px 5px #888;
		box-shadow: 10px 10px 5px #888;
	}

	#left{
		float: left;
		width: 400px;
	}

	#painters{
		margin-top:50px;
		margin-left:130px;
	}

	#fernissage{
		position: absolute;
		left: -120px;
		top: 290px;
		font-size: 72px;
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
	}

	#menu{
		position: absolute;
		left: 20px;
		top: 221px;
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
	}

	#menu a{
		font-size: 12px:
		padding-left: 10px;
		padding-right: 10px;
	}

	#right{
		float:left;
		margin: 50px;
		font-size: 14px;
	}
	</style>

	<script type="text/javascript">


	</script> 
	<title>kreis</title> 
</head> 
<body> 

	<div id="container">

		<div id="left" class="float_left">
			<div id="painters">
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
			</div>
			<div id="fernissage">
				FERNISSAGE
			</div>
			<div id="menu">
				<a>K&uuml;nstler</a> <a>Fernissagen</a> <a>Info</a> <a>Kontakt</a>
			</div>

		</div>

		<div id="right">

			<div id="image" style="width: 600px;height:350px;background-color:#CCC;">
			</div>
			<br />
			Frank Egel<br />
			Ohne Titel 2010<br />
			Papier, Filzstift, Kartoffelsuppe<br />
			<br />
			1, 2, 3, 4 ..

		</div>

	</div>
	
</body> 
</html>

was wollest du/Sie schon wieder?

Frau Mayer · 22-04-2011, 10:33

Hello, danke!
Das mit dem Drehen um 90° ist ja super, dass das geht.
Wegen der Zahlen in der Bildunterschrift: geht das denn auf einfachem Wege, darüber die Bilder auszutauschen?
Merci...
m

Achso, und der container sollte nicht mit Schatten und oben links stehen, das war ein Screenshot aus Photoshop. Soll mittig sein. Wie gehtn das nochmal....? ;o)

Nightflyer · 22-04-2011, 12:27

Zitat:

Zitat von Frau Mayer

Hello, danke!
Das mit dem Drehen um 90° ist ja super, dass das geht.
Wegen der Zahlen in der Bildunterschrift: geht das denn auf einfachem Wege, darüber die Bilder auszutauschen?
Merci...
m

Achso, und der container sollte nicht mit Schatten und oben links stehen, das war ein Screenshot aus Photoshop. Soll mittig sein. Wie gehtn das nochmal....? ;o)

Ja das geht ziemlich einfach. Mittels Javascript würde die dann eingeblendet während das alte Bild ausgeblendet wird.

Beispielsweise damit:
.fadeToggle() – jQuery API

Frau Mayer · 22-04-2011, 12:38

Jippie, danke! Ich als Webdepp blicks zwar nicht so recht, aber über die Feiertage krieg ichs ja vielleicht hin. Merci! m

Frau Mayer · 22-04-2011, 13:28

Ähm, ich hab da dann doch noch ein Problem... Das Ganze sollte ja 1000 x 600 px groß sein und mittig im Browser dargestellt werden. Wenn ich dem Container eine Breite gebe, zerschießt das alles... Wie macht mans denn richtig?

Frau Mayer · 22-04-2011, 13:42

Hm, der ganze Code ist nicht auf eine Breite von 1000 px angelegt, richtig? Das Layout innerhalb der 1000 x 600 px sollte nicht flexibel sein. Und wenn der Kasten mittig im Browser dargestellt werden soll, geht das mit den absoluten Positionen dann überhaupt noch?

Wenn ich dem Container 1000 x geben, siehts so aus.
Bitte nicht böse werden, ich bin halt eigentlich ein Printgrafiker....

Nightflyer · 22-04-2011, 15:50

Nicht böse sein zurück aber dafür gibts eben die Leute die davon zumindest ein wenig Ahnung haben

Sowas als Anfanger zu machen endet oft meist nur schlichtweg im Chaos...

Hab die neue Datei angehängt

HTML-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"> 

<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="http://code.jquery.com/jquery-1.5.js"></script>
	<style type="text/css">

	*{
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;

	}

	body{
		background-color: #CCC;
        
	}

	#container{
        position: absolute;
        left: 50%;
        top: 50px;
        margin-left: -500px;
        width: 1000px;
		min-height: 600px;
		background-color: #FFF;
		-moz-box-shadow: 10px 10px 5px #888;
		-webkit-box-shadow: 10px 10px 5px #888;
		box-shadow: 10px 10px 5px #888;
	}

	#left{
		float: left;
		width: 300px;
	}

	#painters{
		margin-top:50px;
		margin-left:130px;
	}

	#fernissage{
		position: absolute;
		left: -180px;
		top: 240px;
		font-size: 72px;
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
	}

	#menu{
		position: absolute;
		left: -50px;
		top: 171px;
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
	}

	#menu a{
		font-size: 12px:
		padding-left: 10px;
		padding-right: 10px;
	}

	#right{
		float:left;
		margin-top: 50px;
		font-size: 14px;
	}
    
    .pictures{
        display:  none;
    }
    
	</style>

	<script type="text/javascript">
    
    var show_pic = 0;

    function showpic( nr ){
            
        $('.pictures:eq('+show_pic+')').fadeToggle('slow', function(){
            $('.pictures:eq('+nr+')').fadeToggle('slow');
        });
        show_pic = nr;
        
    }

    $(document).ready( function(){
        
        $('.pictures').each( function(i){
            
            $('.pictures').append('<a onclick="showpic('+i+')">'+(i+1)+'</a>&nbsp;')
            
        });
        
        $('.pictures:first').show();
        
    });


	</script> 
    
    
	<title>kreis</title> 
</head> 
<body> 

	<div id="container">

		<div id="left" class="float_left">
			<div id="painters">
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
				Vorname Nachname<br />
			</div>
			<div id="fernissage">
				FERNISSAGE
			</div>
			<div id="menu">
				<a>K&uuml;nstler</a> <a>Fernissagen</a> <a>Info</a> <a>Kontakt</a>
			</div>

		</div>

		<div id="right">
            <div class="pictures">
    			<div id="image" style="width: 500px;height:350px;background-color:#888;">
    			</div>
    			<br />
    			Frank Egel<br />
    			Ohne Titel 2010<br />
    			Papier, Filzstift, Kartoffelsuppe<br />
    			<br />
            </div>
            <div class="pictures">
    			<div id="image" style="width: 400px;height:350px;background-color:#F88;">
    			</div>
    			<br />
    			Frank Egel<br />
    			Der Wolf<br />
    			Zuckerwatte<br />
    			<br />
            </div>
            <div class="pictures">
    			<div id="pictures" style="width: 500px;height:150px;background-color:#8F8;">
    			</div>
    			<br />
    			Frank Egel<br />
    			Neues ohne Titel 2011<br />
    			Papier, Filzstift<br />
    			<br />
            </div>
            <div class="pictures">
    			<div id="image" style="width: 300px;height:250px;background-color:#88F;">
    			</div>
    			<br />
    			Frank Egel<br />
    			T&ouml;pferchaos<br />
    			Ton<br />
    			<br />
            </div>
		</div>

	</div>
	
</body>

Frau Mayer · 22-04-2011, 17:07

Zitat:

Zitat von Nightflyer

Nicht böse sein zurück aber dafür gibts eben die Leute die davon zumindest ein wenig Ahnung haben

... und eben das Fläschforum! ;o)

Will ja keiner für lau machen sowas. Deshalb mach ichs immer selber, is ja Privatkram. Und funktioniert auch irgendwann! Sieht jetzt erst mal so aus und wird alsbald verlinkt.

Merci nochmals!

Nightflyer · 22-04-2011, 20:36

Der nächste Schritt wäre den Inhalt dynamisch zu machen, ihn also in eine Datenbank ( mySQL, XML ) einzugeben und von dort aus auszulesen. Leider nichts für einen absoluten Anfänger.

Grausig wäre es für jeden einzelnen Maler ne eigene Seite zu machen...

Frau Mayer · 22-04-2011, 20:38

Durch diese Grausigkeit muss ich leider durch... Das geht schon. Sind ja ein paar Feiertage jetzt ;o)

Ahrsib · 22-04-2011, 21:08

Versuche trotzdem, die Site mit einem CMS dynamisch zu machen,
bei jeder Änderung oder Erweiterung wird sich der Aufwand
als lohnend herausstellen.
Guck dir mal modX an!

Ahrsib
... mit freundlicher Empfehlung.

PS: Diese Grundlagen sind auch ganz hilfreich: http://de.selfhtml.org/css/

Frau Mayer · 22-04-2011, 21:18

Hm, danke... Aber ich weiß nicht recht. Das ist immer alles so komblitsierd. So umfangreich ist die Seite zum einen nicht und zum anderen wird sie erst mal nur langsam wachsen... Aber stimmt natürlich, sauber ist das alles nicht so! Aber mei.

21-04-2011, 12:20	#1 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Sitelayout mit CSS - Anfängerfrage Moin! Ich lege grade eine neue Site mit diesem Layout an. Das Bild ("FERNISSASCH") links soll immer stehenbleiben, rechts daneben steht das Hauptmenü und davon rechts ist das Untermenü (hier: Namen). Erste Frage: wie muss es in der CSS lauten, damit die drei Bereiche nebeneinander stehen? Zweite Frage: Pro Name gibt es mehrere Fotos und Bildunterschriften. Kann ich da über die Zahlen (hier: 1-4) zu den anderen Fotos springen, ohne alles neu zu laden? Ich habe folgenden Code aus einer anderen Site von mir genommen (Maße sind noch falsch): @charset "utf-8"; /* CSS Document / body { margin: 0; padding: 0; font: 70% Verdana, Arial, sans-serif; text-align: left; color:#666; background-color: #000; } #container { margin: 1em auto; width: 1000px; height: 600px; text-align: left; background-color: #ffffff; } #abstand1 { width:1000; height:20px; margin-top:0px; background-color: #000; } #kopf { width:1000; height:10px; margin:0; background-color: #ffffff; } #hauptnav { width:1000; height:45px; margin-top:0px; background-color: #ffffff; } #abstand { width:1000; height:12px; margin-top:0px; background-color: #ffffff; } #zweitnav { width: 205px; height:500px; margin: 0px 0px 0px 89px; background-color: #006699; } #inhalt { height:500px; background-color: #ffffff; } #abstand2 { width:900; height:12px; margin-top:0px; background-color: #ffffff; } #fuss { height:37px; background-color: #ffffff; /margin-left:180px;*/ } #abstand3 { width:1000; height:8px; margin-top:0px; background-color: #ffffff; } inhalth1 { } inhalth2 { } inhalth3 { } inhaltcopy1 { } Dankeschööön... __________________ wir brauchen endlich einen plan.

21-04-2011, 12:33	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	Kannst du noch den HTML-Code den du benutzt beilegen? __________________ (\__/) (='.'=) (")_(")

21-04-2011, 12:37	#3 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Der ist aber ziemlich verhunzt... <!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>Fernissasch!</title> <link rel="stylesheet" type="text/css" href="layout.css"> <style type="text/css"> </style> </head> <div id="container"> <div id="abstand1"> </div> <div id="kopf"></div> <div id="hauptnav"><a href="gestecke_tyr.html"></div> <div id="abstand"></div> <div id="zweitnav"> <p><br /> <strong>Menü 1</strong><br /> <a href="gestecke_maus.html">Menü 2</a><br /> <p> </p> <p> </p> <p>  </p> <table width="170" height="134" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="25" height="134"> </td> <td width="145" valign="top">Text text text </td> </tr> </table> <p><br /> </p> </div> <div id="inhalt"> <inhalth1><br /> <br /> </inhalth1> <br /> <inhalth2> <p>Text text text <br /> </p> </div> <div id="abstand2"></div> <div id="fuss"></div> <div id="abstand3"></div> </div> </body> </html> __________________ wir brauchen endlich einen plan.

22-04-2011, 10:33	#5 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Hello, danke! Das mit dem Drehen um 90° ist ja super, dass das geht. Wegen der Zahlen in der Bildunterschrift: geht das denn auf einfachem Wege, darüber die Bilder auszutauschen? Merci... m Achso, und der container sollte nicht mit Schatten und oben links stehen, das war ein Screenshot aus Photoshop. Soll mittig sein. Wie gehtn das nochmal....? ;o) __________________ wir brauchen endlich einen plan.

22-04-2011, 12:38	#7 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Jippie, danke! Ich als Webdepp blicks zwar nicht so recht, aber über die Feiertage krieg ichs ja vielleicht hin. Merci! m __________________ wir brauchen endlich einen plan.

22-04-2011, 13:28	#8 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Ähm, ich hab da dann doch noch ein Problem... Das Ganze sollte ja 1000 x 600 px groß sein und mittig im Browser dargestellt werden. Wenn ich dem Container eine Breite gebe, zerschießt das alles... Wie macht mans denn richtig? __________________ wir brauchen endlich einen plan.

22-04-2011, 13:42	#9 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Hm, der ganze Code ist nicht auf eine Breite von 1000 px angelegt, richtig? Das Layout innerhalb der 1000 x 600 px sollte nicht flexibel sein. Und wenn der Kasten mittig im Browser dargestellt werden soll, geht das mit den absoluten Positionen dann überhaupt noch? Wenn ich dem Container 1000 x geben, siehts so aus. Bitte nicht böse werden, ich bin halt eigentlich ein Printgrafiker.... __________________ wir brauchen endlich einen plan.

22-04-2011, 20:36	#12 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.979	Der nächste Schritt wäre den Inhalt dynamisch zu machen, ihn also in eine Datenbank ( mySQL, XML ) einzugeben und von dort aus auszulesen. Leider nichts für einen absoluten Anfänger. Grausig wäre es für jeden einzelnen Maler ne eigene Seite zu machen... __________________ (\__/) (='.'=) (")_(")

22-04-2011, 20:38	#13 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Durch diese Grausigkeit muss ich leider durch... Das geht schon. Sind ja ein paar Feiertage jetzt ;o) __________________ wir brauchen endlich einen plan.

22-04-2011, 21:08	#14 (permalink)
Ahrsib Pixeldipaxeldipux Registriert seit: Dec 2002 Ort: Ruhrmetropole Essen Beiträge: 7.667	Versuche trotzdem, die Site mit einem CMS dynamisch zu machen, bei jeder Änderung oder Erweiterung wird sich der Aufwand als lohnend herausstellen. Guck dir mal modX an! Ahrsib ... mit freundlicher Empfehlung. PS: Diese Grundlagen sind auch ganz hilfreich: http://de.selfhtml.org/css/ __________________ Selbstgelerntes ist am Besten! iMac G5/2,1GHz, 2,5GB RAM, 20" Widescreen (16801050), MacOS 10.4.11, Safari 4.1, dsl 6000 Achim ...Orient z.Zt. kein Link zu den Achims des Flashforums Das Flashforum zu unterstützen ist ganz einfach! Geändert von Ahrsib (22-04-2011 um 21:10 Uhr) Grund: Noch einen Tipp eingefügt.*

22-04-2011, 21:18	#15 (permalink)
Frau Mayer Am Abgrund. Registriert seit: Jun 2002 Ort: Hamburg Beiträge: 135	Hm, danke... Aber ich weiß nicht recht. Das ist immer alles so komblitsierd. So umfangreich ist die Seite zum einen nicht und zum anderen wird sie erst mal nur langsam wachsen... Aber stimmt natürlich, sauber ist das alles nicht so! Aber mei. __________________ wir brauchen endlich einen plan.

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
htm-anfängerfrage	hds26846	Flash Einsteiger	4	02-06-2007 23:39
anfängerfrage:	Josh22	Flash Einsteiger	3	27-11-2006 16:13
Anfängerfrage	compuboy1010	Flash MX 2004	5	14-06-2005 12:02
anfängerfrage	maxepopaxe	ActionScript 1	5	19-01-2003 04:04
Anfängerfrage	chrizzzi	Flash 4 und Flash 5	14	03-01-2003 08:20