kostenloser Webspace werbefrei: lima-city

wie anordnen ohne position:absolute

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   same-one

   same-one hat kostenlosen Webspace.

   18:09, 7.10.2011

   heyy...
   
   ich bin es normalerweise gewohnt meine DIVs etc. anordnen zu können so dass ich
   es nachvollziehen kann, nun wollte ich bei meinem tag/portfolio">portfolio aber dieses "jFlow"-Script
   gerne verwenden und bin soweit gekommen:
   
   http://same-one.lima-city.de/portfolio/
   
   
   Allerdings krieg ich die Inhalte nicht zentriert bzw. an die Stellen wo ich sie gerne hätte!
   Helft mir weiter!! :/
   
   
   Ich verzweifel seit Tagen..
   
   EDIT:
   wenn jemand ein einfaches Script kennt wo man nen schönen Animierten Übergang zu
   jeglicher DIV machen kann - bitte her damit - habe schon 3x von GRUND neu gestartet :/
   
   
   AKA aym :)
   
   Beitrag zuletzt geändert: 7.10.2011 18:10:36 von same-one

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. illuxio

   

   illuxio hat kostenlosen Webspace.

   18:22, 7.10.2011

   Hallo,
   
   das ist gar nicht so schwer. Du musst lediglich folgendes machen:
   
   Gibt dem umschließenden DIV eine Breite und sag im "margin: 0 auto;"
   
   Bei dir sollte es dann so aussehen:
   

   #content {
   width: 500px;
   margin: 0 auto;
   }

   
   Gruß
   illuxio

4. thriller

   thriller hat kostenlosen Webspace.

   20:15, 7.10.2011

   würde jetzt das gleiche wie illuxio vorschlagen.
   
   bin mir nicht sicher, aber sollte bei dir sollte wohl der bereich sein:
   

   #c1, #c2, #c3	{height:800px; margin:0px; background:#eee; padding: 160px 0 0 50%;}

5. Autor dieses Themas

   same-one

   same-one hat kostenlosen Webspace.

   19:58, 8.10.2011

   wollte irgendwie nicht so richtig, und habe heute nochmal
   KOMPLETT neu angefangen...
   
   http://same-one.lima-city.de/portfolio/
   
   ...mit dem Rest schlage ich mich morgen weiter um die Ohren,
   aber bei der NAVIGATIONSLEISTE brauch ich echt Hilfe!
   
   Warum springt das so wenn man über die Punkte "Portfolio" und "Info" geht?!
   ich habe schon voll viel versucht mit dem code - aber will alles nicht so recht.

6. uhrinfo

   uhrinfo hat kostenlosen Webspace.

   21:05, 8.10.2011

   same-one schrieb:
   Warum springt das so wenn man über die Punkte "Portfolio" und "Info" geht?!
   ich habe schon voll viel versucht mit dem code - aber will alles nicht so recht.

   
   
   bestimmt weil Du bei #menu a und #menu a:hover
   unterschiedliche padding/margin Werte stehen hast
   
   EDIT: doch mal in den Code geschaut:
   
   

   #menu a				{color:#fff;  text-decoration:none; padding:10px 15px 10px 15px; outline: none;}
   				
   
   #menu a:hover		{background:#fff; color:#ccc; text-decoration:none; padding: 1px 7px 1px 8px;
   
   					 border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;	-khtml-border-radius: 10px;}
   
   
   #menu a.selected	{background: #FFF; color:#999; text-decoration:none; padding: 1px 7px 1px 8px;
   
   					 border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;	-khtml-border-radius: 8px;}

   
   
   
   
   Du kannst schon MouseOver Effekte damit machen,
   aber es sollten alle Abstände bei #menu a Elementen in der Summe gleiche Abstände haben
   
   also bei #menu a:hover mit den Werten von padding: 1px 7px 1px 8px; versuchen,
   etwas mehr links und rechts Abstand ... z.B . padding: 1px 14px 1px 14px;
   
   
   und definiere CSS leiber untereinander während der Entwicklung,
   das ist dann leichter zu Lesen und somit einfacher Fehler zu finden
   
   

   #menu a { 
   		color:#fff;  
   		text-decoration:none; 
   		padding:10px 15px 10px 15px; outline: none;
   }
   
   					
   
   #menu a:hover { 
   		background:#fff; 
   		color:#ccc; 
   		text-decoration:none; 
   		padding: 1px 14px 1px 14px;
   		border-radius: 10px; 
   		-moz-border-radius: 10px; 
   		-webkit-border-radius: 10px;
   		-khtml-border-radius: 10px;
   }
   
   
   #menu a.selected { 
   		background: #FFF; 
   		color:#999; 
   		text-decoration:none; 
   		padding: 1px 14px 1px 14px;
   		border-radius: 8px; 
   		-moz-border-radius: 8px; 
   		-webkit-border-radius: 8px;
   		-khtml-border-radius: 8px;
   }

   
   
   
   die Beispiel-Werte padding: 1px 14px 1px 14px; sind nur geschätzt,
   einfach probieren und Anpassen bis Breite stimmt ...
   
   Beitrag zuletzt geändert: 8.10.2011 21:08:06 von uhrinfo
7. Autor dieses Themas

   same-one

   same-one hat kostenlosen Webspace.

   11:36, 9.10.2011

   die Beispiel-Werte padding: 1px 14px 1px 14px; sind nur geschätzt,
   einfach probieren und Anpassen bis Breite stimmt ...

   
   
   Hat fast gestimmt 15px
   
   DANKE!!!
   
   (ich nerv' womöglich noch einmal im Laufe des Tages ^ ^)

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?