Zurück   Flashforum > Alternative Technologien > HTML und CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 21-04-2011, 12:20   #1 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 21-04-2011, 12:33   #2 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Kannst du noch den HTML-Code den du benutzt beilegen?
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 21-04-2011, 12:37   #3 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<table width="170" height="134" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="134">&nbsp;</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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 21-04-2011, 14:31   #4 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
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?
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 22-04-2011, 10:33   #5 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 22-04-2011, 12:27   #6 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
Zitat:
Zitat von Frau Mayer Beitrag anzeigen
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
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 22-04-2011, 12:38   #7 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 22-04-2011, 13:28   #8 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 22-04-2011, 13:42   #9 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 22-04-2011, 15:50   #10 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
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> 
Angehängte Dateien
Dateityp: rar test.rar (1,2 KB, 1x aufgerufen)
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 22-04-2011, 17:07   #11 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
Registriert seit: Jun 2002
Ort: Hamburg
Beiträge: 135
Zitat:
Zitat von Nightflyer Beitrag anzeigen
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!
__________________
wir brauchen endlich einen plan.
Frau Mayer ist offline   Mit Zitat antworten
Alt 22-04-2011, 20:36   #12 (permalink)
Inventar
 
Benutzerbild von Nightflyer
 
Registriert seit: Jul 2002
Beiträge: 7.031
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...
__________________
(\__/)
(='.'=)
(")_(")
Nightflyer ist offline   Mit Zitat antworten
Alt 22-04-2011, 20:38   #13 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Alt 22-04-2011, 21:08   #14 (permalink)
Pixeldipaxeldipux
 
Benutzerbild von Ahrsib
 
Registriert seit: Dec 2002
Ort: Ruhrmetropole Essen
Beiträge: 7.729
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 (1680*1050), 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.
Ahrsib ist offline   Mit Zitat antworten
Alt 22-04-2011, 21:18   #15 (permalink)
Am Abgrund.
 
Benutzerbild von Frau Mayer
 
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.
Frau Mayer ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


Ä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


Alle Zeitangaben in WEZ +1. Es ist jetzt 05:13 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele