Ein paar kleine Fragen zum CSS Stylesheet...

cebulba · Beitrag von **cebulba** » Di 28. Feb 2006, 16:38

Moin.

Ich hätte da ein paar Fragen zum CSS Stylesheet bei der Standardinstallation, die hier sicherlich mit Leichtigkeit beantwortet werden können? Vielen dank schonmal...

1) Die ganze Webseite ist ja irgendwie auf 800x600 ausgerichtet und linksbündig, d.h. bei 1024xYX ist alles am linken Rand. Wie bekomm ich das mittig? Meine Vermutung liegt hier in Zeile 1 bei der style.css wo der body Bereich definiert wird...

2) Was muß ich in der CSS ändern, damit ich die Schriftgröße per Browser (IE) verändern kann? also wenn ich unter IE->Ansicht->Schriftgrad eben diese größer Stelle und die Texte auf der Webseite entsprechend geändert werden...

3) Ich finde die Stelle im Code nicht, die bei den Links im Bereich der BOTTOMNAVIGATION und HILFSNAVIGATION (oben rechts) den "|" nach dem Link darstellen. Den würd ich gerne weghaben...also aus "Kontakt | Sitemap | English" soll einfach "Kontakt Sitemap English" werden...

4) Wie muß ich das HEADLINE Modul ändern, bzw. den Stylesheet dazu, damit ich standardmäßig links neben die Headline ein kleines Gif eingefügt bekomme?

War nicht bei Contenido 4.5.X alles mit Tabellen-Layouts? Ist das soviel besser das mit CSS zu machen?

Jon · Beitrag von **Jon** » Di 28. Feb 2006, 17:12

Hallo cebulba,

1. Die Sache ist etwas fummelig, kannst versuchen es Dir bei einer Seite abzugucken, die es so macht.

2. Du musst die font-size in einer relativen Größe z.B. em, ex angeben, statt in px. Siehe auch: SelfHTML

3. Im Modul BottomNavigation steht irgendwo:

Code: Alles auswählen

#Output sub categories
$output = '';
if (count($navigation) > 0) {
	foreach ($navigation as $key => $data) {
		$output .= '<a href="'.$sess->url("front_content.php?idcat=".$data['idcat']).'" class="bottomnavi" title="'.$data['name'].'">'.$data['name'].'</a> | ';
	}
}

Dort siehst Du ganz am Ende der Zeile das Pipe-Zeichen | . Das kannst Du einfach entfernen.

4. Schau Dir dazu einfach mal das Handbuch Administrator an und die Typen CMS_IMG...

Und noch ganz allgemein: Ja, tabellenfreies Layout ist schöner, aber es zwingt Dich keiner das so zu machen. Du solltest den Beispielmandanten wirklich nur als Beispiel verstehen. Du bist vollkommen frei im Entwurf eigener Layouts und brauchst Dich nicht nach diesem Mandanten richten.

Ansonsten vielleicht noch mal die einschlägigen HTML, CSS, PHP Seiten studieren.

Gruß,
Jon

cebulba · Beitrag von **cebulba** » Do 2. Mär 2006, 23:36

Jon hat geschrieben:Hallo cebulba,

1. Die Sache ist etwas fummelig, kannst versuchen es Dir bei einer Seite abzugucken, die es so macht.

Gruß,
Jon

so. Alles andere hab ich hinbekommen. Danke.

Aber wie bekomm ich das ganze "mittig"??

man müßte dem ganzen Kram doch irgendwie ne Tabelle vorschieben können...??!?

Maribeauli · Beitrag von **Maribeauli** » Fr 3. Mär 2006, 10:24

cebulba

Aber wie bekomm ich das ganze "mittig"??

Du mußt in deinem Layout einen DIV erstellen, ein Beispiel:

Code: Alles auswählen

<...deine Headerdaten ...>
<BODY>
<DIV ID="CENTER>

und hier kommt alles 1:1 rein was du bisher hattest

</DIV>>
</BODY>

Und in deiner CSS kommt nun folgendes für die ID = CENTER:

Code: Alles auswählen

#center {
width:780px;
margin: 15px auto;
text-align:left;
what ever ...; 
}

Das Entscheidende ist das hier:
margin: 15px auto; <- das ist das entscheidende -15px oben/unten - rechts/links = auto = Zentriert

simu · Beitrag von **simu** » Fr 3. Mär 2006, 14:40

Maribeauli hat geschrieben:
Code: Alles auswählen
#center {
width:780px;
margin: 15px auto;
text-align:left;
what ever ...; 
}

Das wird aber im IE nicht funktionieren...

damit es in CSS-fähigen Browsern und im IE funktioniert, mache ich sowas immer wie folgt...

Code: Alles auswählen

#center {
position:absolute;
left:50%;
width:780px;
margin:15px 0 15px -390px;
}

Maribeauli · Beitrag von **Maribeauli** » Fr 3. Mär 2006, 16:17

simu,

doch, genauso funktioniert es im IE, zumindest bei mir.
Ich habe den Code aus einer CSS von mir kopiert.
Und da gibt es keine Probleme im IE (6SP2) / FF (1.5x) / Opera (8.5x).
Mit allen 3 Browservarianten getestet.

Aber Danke für deinen Hinweis.
Eine Alternative ist immer gut, werde ich mal ausprobieren

EDIT:
Der DIV Center ist bei mir nur ein Container der weitere DIVs (für das Box-Modell mit den eigentlichen Inhalten) aufnimmt, ob es daran liegt das es im IE bei mir geht?

cebulba · Beitrag von **cebulba** » Fr 3. Mär 2006, 22:10

moin.

hmmh...geht beides nicht.
Ich benutze das Standardlayout vom mitgelieferten Klienten...hab den DIV Tag in den Body Bereich geschoben und auch die CSS editiert.
Aber da passiert gar nichts...

hier mal ein Auszug aus dem Code...

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Contenido Demo-Seite</title>
	<link href="css/style1.css" rel="stylesheet" type="text/css">
	<link href="css/style_print1.css" rel="stylesheet" type="text/css" media="print">
	<!--[if IE]>
		<style>
			#imagecolumn {
				width:170px;
			}
			#logo {
				margin-top:0;
			}
			#navipath {
				padding-top:2px;
			}
			.balken {
				background-position:0px 0px ;
			}				
			#additionalnavi {
				padding-top:2px;
			}
        </style>
	<![endif]-->
<script language="javascript" type="text/javascript" src="js/jsApi.js"></script>
</head>
<body>

<div id="outer"> 
<DIV ID="center"> 
	<div id="innerwrap"> 
		<div id="centrecontent"> 
						<container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
			<div id="navipath">
				<container id="60" name="Navigationspfad" types="Navigation" mode="fixed" default="Navigationspfad">Navigationspfad</container>
			</div>

                           <container id="12" name="Text" types="Content" default="">Content 1</container>
			<container id="15" name="Text" types="Content" default="Text HTML (2)">Content 2</container>
			<container id="22" name="Text" types="Content" default="">Content 3</container>
			<container id="24" name="Text" types="Content" default="">Content 4</container>
			<container id="26" name="Text" types="Content" default="">Content 5</container>
			<container id="28" name="Text" types="Content" default="">Content 6</container>
			<br/><br/>
			<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="background-color:rgb(20,116,68);"><img src="images/grey.gif" width="1" height="1" border="0" alt="" title=""/></td></tr></table>
			<div id="bottomnavi">
				<container id="30" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
			</div>			
		</div>
		<div id="left"> 
			<container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
			
			<container id="48" name="Zufallsbild1" types="Content" default="">Zufallsbild1</container>
                           <br><container id="44" name="Suche" types="Navigation" default="">Suche</container>
                            <div id="additionalnavi"><container id="50" name="Hilfsnavigation" types="Navigation" mode="fixed" default="Hilfsnavigation">Hilfsnavigation</container></div>

			<container id="49" name="Zufallsbild2" types="Content" default="">Zufallsbild2</container> </div>
	</div></div>
	<div id="right"></div>
	<div id="clearfooter"></div>
	<div id="header"> 
		
		<div id="logo">
			<table width="780" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td><a href="front_content.php" title="Zur Homepage"><img src="../cms/upload/logos/Header.jpg" border="0" alt="Logo" title="Logo"/></a></td>
					
					
				</tr>
<tr>
					<td colspan="3" class="balken"><img src="images/blank.gif" border="0" width="780" height="3" alt=""/></td>
				</tr>

							</table>

		</div>
	</div>
</div>
<div id="imagecolumn">
	<container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div>
</div>
</body>
</html>

[/code]

Maribeauli · Beitrag von **Maribeauli** » Fr 3. Mär 2006, 23:03

cebulba,

der DIV CENTER muß der erste Container im Layout sein.

Dein Layout:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
   <title>Contenido Demo-Seite</title> 
 ...
</head> 
<body> 

<div id="outer"> 
<DIV ID="center"> 
...

Richtig wäre:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
   <title>Contenido Demo-Seite</title> 
...
</head> 
<body> 

<DIV ID="center">
<div id="outer">
...

Probiere es mal so.

cebulba · Beitrag von **cebulba** » Fr 3. Mär 2006, 23:29

stimmt. Mein Fehler.

Also @Maribeauli - deine Version geht gar nicht.

Die CSS von simu schon ABER:

Das HintergrundBild wird nicht mitgenommen und die rechte Spalte ("right","imagecolumn") bleibt auch fix und überlappt damit den "centrecontent" Bereich.

zusätzlich rutscht alles ca. 10-20 pixel nach unten.

Vorschläge?

Maribeauli · Beitrag von **Maribeauli** » Fr 3. Mär 2006, 23:48

cebulba,

wenn meine Version nicht geht aber die von @simu ist es doch o.k.

Die CSS und das Layout des Beispeil-Mandanten ist nicht gerade "lernfreuding" wenn man bisher wenig mit DIV, Positionierung, und Layout gemacht hat.

Ein Tipp wie ich es gemacht habe (und dabei einiges gelernt):

Eine Datei in HTML mit CSS auf der Festplatte angelegt,
in dieser Datei habe ich mein Layout angelegt, mit Blindtexten versehen, und getestet.

Als das Layout richtig war habe ich alles rausgelöscht was "Inhalte", oder gemauschelt war, die Contenido-Contianer des entsprechenden Layoutes (war bei mir das Layout - Standard) eingefügt und als neues Layout in Contenido eingebaut, daraus ein Template erzeugt und getestet.

War, zumindestens für mich, schneller und lehrreicher als das Standard-Layout immer wieder zu verbessern.
Nur ein Tipp, andere wege füheren auch zum Erfolg.

Ach ja, da du nicht schreibst welchen Browser du nutzt, die Browser interpretieren die CSS-Befehle nicht alle gleich, da gibt es Unterschiede und oft "Anpaßarbeit und Basteleien" bis es in anderen Browsern auch funktioniert.

Darth-Vader · Beitrag von **Darth-Vader** » Di 7. Mär 2006, 08:24

Gerade der Internet Explorer kocht da oft gerne sein eigenes Süppchen. Deshalb "entwickle" ich immer im Firefox und achte darauf, dass es standardkonform ist. Passt das alles schau ich mir's im IE an und bau entsprechende Hacks ein....

Nützliche Links hierzu:

- http://www.getfirefox.com

- http://validator.w3.org/

- http://jigsaw.w3.org/css-validator/

- http://de.selfhtml.org

rezeptionist · Beitrag von **rezeptionist** » Di 7. Mär 2006, 08:41

Noch ein nützlicher Tipp

http://chrispederick.com/work/webdeveloper/

sollte nicht fehlen das Webdeveloper plugin

Darth-Vader · Beitrag von **Darth-Vader** » Di 7. Mär 2006, 10:45

rezeptionist hat geschrieben:Noch ein nützlicher Tipp

http://chrispederick.com/work/webdeveloper/

sollte nicht fehlen das Webdeveloper plugin

stimmt, das ist echt fast unentbehrlich geworden für mich, echt klasse Teil!

rezeptionist · Beitrag von **rezeptionist** » Di 7. Mär 2006, 10:47

Yepp da sind wir schwaben uns gleich lach "ist umsonst" schade das es das nicht für den IE gibt

Darth-Vader · Beitrag von **Darth-Vader** » Di 7. Mär 2006, 13:03

rezeptionist hat geschrieben:Yepp da sind wir schwaben uns gleich lach "ist umsonst" schade das es das nicht für den IE gibt

ähm naja, ich bin leider "nur" en sog. "reigeschmeckter"!

Naja, ich brauch IE net bzw mag ihn net besonders... abe rzum Glück gibt es ja http://www.browsershots.org