padding Abstand und Positionierung

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

Autor dieses Themas
sessin

sessin hat kostenlosen Webspace.

4:17, 30.4.2010
Das Problem ist folgendes: die Navigation fängt im firefox weiter rechts als im ie an. ich hätte die aber lieber linksbündig wie im ie, nur weiß ich nicht warum er das verschiebt.
Das zweite Problem ist der Balken, den man da rechts sieht. der soll nämlich an die rechte Seite des Hauptfelds und wie ein Schlagschatten aussehen. Da ich aber relative Angaben verwendet habe, frage ich mich ob das mit dem Schatten überhaupt geht..

http://sessin.lima-city.de/projekte/index.html
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

karpfen hat kostenlosen Webspace.

7:09, 30.4.2010
Ich weiss ja nicht, was du für einen IE verwendest, aber im neusten Firefox und im IE 8 ist das Design nur minimalst unterschiedlich. Auch im IE8 ist die Navigation nicht linksbündig.

Schön wäre bei solchen Problemen immer, wenn du den Code der CSS und der Seite selber hier postest.
wagnerm

wagnerm hat kostenlosen Webspace.

7:23, 30.4.2010
Ich habs mir im FF 3.5.9 und im IE6 angesehen und kann an der Navi keinen auf den ersten Blick erkennbaren Unterschied feststellen. Aber vielleicht liegt dein Problem an der falschen Interpretation des Box Modells im IE (http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41)?

Autor dieses Themas

17:26, 30.4.2010

Ok, tut mir leid, ich hatte den IE7 noch drauf.. *schäm*
Naja es funktioniert jetzt. Dafür hab ich jetzt andere Schwierigkeiten..
Woher kommen diese gepunkteten Kästchen wenn man auf einen Navigationspunkt klickt?
Kann man das wegbekommen?

ich habe vor, das, wenn man auf einen buchstaben aus dem logo klickt, zur einem anderen
stylesheet geleitet wird (der inhalt soll derselbe bleiben). nun frage ich mich, wie ich das anstelle, ohne hinterher alle seiten x mal zu haben.
wenn jemand versteht was ich meine ^^

danke für hilfe :smile:

http://sessin.lima-city.de/projekte/index.html

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

a:link {text-decoration:none; color:#666; text-transform:uppercase;}
a:visited {text-decoration:none; color:#666; text-transform:uppercase;}
a:hover {text-decoration:none; color:#FFF; text-transform:uppercase;}
a:active {text-decoration:none; text-transform:uppercase;}
a:focus {text-decoration:none; text-transform:uppercase;}

* {margin: 0 0 0 0;}



body {background:#CCC;
      font-family:Tahoma, Geneva, sans-serif;
	  font-size: 14px;
	  color:#000;
	  -moz-background-origin;
	  -moz-background-clip;
	  overflow-x:hidden;}
	  
#wrap {width: 100%;}

#background {background-image:url(images/grauverlauf.jpg);
           border-left:solid 1px #666;
		   border-right:solid 1px #666;
            width:66%;
		   min-width: 800px;
            height: 100%;
			 margin-left:17%;
			 z-index:0;}

#logo {font-weight:bold;
       height: 27px;
       font-size: 19px;
	   text-transform:uppercase;
	   white-space:nowrap;  
	   padding: 50px;
	   border-bottom:solid 1px #666;
       }
	   


#logo #c {color:#FFF;
          float:left;}
		  

#logo #h {color:#000;
          float:left;}
#logo #h:hover {color:#CC6;}

#logo #a {
          float:left;}
		  
#logo #n {
          float:left;}

#logo #g {
          float:left;}
		  
#logo #e {
          float:left;}

#logo #strich {color:#FFF;
          float:left;}
		  
#logo #d {
          float:left;}
		  
#logo #e2 {
          float:left;}
		  
#logo #s {
          float:left;}
		  
#logo #i {
          float:left;}
		  
#logo #g2 {
          float:left;}
		  
#logo #n2 {
          float:left;}
		  
br.clear {clear:both;}

#navi {
	   width: 750px;
	   margin-left:10px;
       margin-top:45px;
	   white-space:nowrap;
	   color:#666;
	   font-size:14px;
       }

#active {color:#FFF;}

#navi ul li {
	list-style:none;
    padding-right:25px;
    float:left;
	white-space:nowrap;}
	
br.clear {clear:both;}

		  
#content p {width: 650px;
	        padding-left:50px;
}

#content #absatz1 {padding-top:70px;}

#content #absatz2 {padding-top:40px;}
	   
#footer {margin-left:42%;
         padding-top: 30px;
         font-size:11px;}
		 
#shadow {background-image:url(images/shadow.png);
        background-position:right;
		background-repeat: no-repeat;
         height:100%;
		 width:66%;
		 min-width:800px;
		 margin-top:0px;
		 margin-left: 20%;
		 z-index:-10;
		 position:absolute;

         }

<!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" />
<style type="text/css"> @import "c.css"; </style>

<title>Change&ndash;Design</title>
</head>

<body>

<div id="wrap">
<div id="shadow"></div>
<div id="background">

<div id="logo">
<a href="index.html" id="c">C</a>
<a href="h.html" id="h">H</a>
<div id="a">A</div>
<div id="n">N</div>
<div id="g">G</div>
<div id="e">E&nbsp;</div>
<div id="strich">&#448;</div>
<div id="d">&nbsp;D</div>

<div id="e2">E</div>
<div id="s">S</div>
<div id="i">I</div>
<div id="g2">G</div>
<div id="n2">N</div>
</div>


<div id="navi">
<ul>
<li><a href="index.html" id="active">HOME</a></li>

<li><a href="content/fotografie.html">FOTOGRAFIE</a></li>
<li><a href="content/photoshop.html">PHOTOSHOP</a></li>
<li><a href="content/stuff.html">STUFF</a></li>
<li><a href="content/guestbook.html">G&Auml;STEBUCH</a></li>
<li><a href="content/impressum.html">KONTAKT</a></li>
</ul>
</div>




<div id="content">
<p id="absatz1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p id="absatz2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

</div>


<div id="footer">
&copy; Kerstin Loop
</div>
<br class="clear"></div>

</div>

</div>


<script src="http://layer.lima-city.de/support_layer.php" type="text/javascript"></script></body>
</html>

Beitrag zuletzt geändert: 30.4.2010 17:27:05 von sessin

sonok

Moderator

sonok hat kostenlosen Webspace.

17:36, 30.4.2010
Ich glaub Du mußt nur beim a-css-dingens ein outline:none; mit hineinpacken

also

a:link {text-decoration:none; color:#666; text-transform:uppercase; outline:none;}

das mit dem anderen Stylesheet machst du wohl recht einfach mit einer GET-Variablen und php

edit
ähm - also

<?php echo "<style type=\"text/css\"> @import \"".$GET["dateiname"].".css\"; </style>"; ?>

als Zeile wo der Stylesheet ist und dann den link der Buchstaben als a <href="index.php?dateiname=css1">

jetzt muß es nur noch eine css1.css geben und es sollte gehen. Und dann kann man alles noch verfeinern und so.

Beitrag zuletzt geändert: 30.4.2010 17:41:37 von sonok

Autor dieses Themas

sessin

sessin hat kostenlosen Webspace.

1:25, 2.5.2010

cool, Danke :smile:

aber ich glaube, ich habe da noch irgendwas falsch gemacht...

http://sessin.lima-city.de/projekte/index.php

<!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" />
  <?php echo "<style type=\"text/css\"> @import \"".$GET["dateiname"].".css\"; </style>"; ?>
  <title>Change&ndash;Design</title>
</head>

<body>

<div id="wrap">
  <div id="shadow"></div>
  <div id="background">
    
    
    <div id="logo">
      <a href="index.php?dateiname=c" id="c">C</a>
      <a href="index.php?dateiname=h" id="h">H</a>
      <a href="a.html" id="a">A</a>
      <a href="n.html" id="n">N</a>
      <a href="g.html" id="g">G</a>
      <a href="e.html" id="e">E&nbsp;</a>
        <div id="strich">&#448;</div>
      <a href="d.html" id="d">&nbsp;D</a>
      <a href="e2.html" id="e2">E</a>
      <a href="s.html" id="s">S</a>
      <a href="i.html" id="i">I</a>
      <a href="g2.html" id="g2">G</a>
      <a href="n2.html" id="n2">N</a>
    </div>
    
    
    <div id="navi">
      <ul>
        <li><a href="index.html" id="active">HOME</a></li>
        <li><a href="content/fotografie.html">FOTOGRAFIE</a></li>
        <li><a href="content/photoshop.html">PHOTOSHOP</a></li>
        <li><a href="content/stuff.html">STUFF</a></li>
        <li><a href="content/guestbook.html">G&Auml;STEBUCH</a></li>
        <li><a href="content/impressum.html">KONTAKT</a></li>
      </ul>
    </div>
    
    
    
    
    
    <div id="content">
      <p id="absatz1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
      <p id="absatz2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    
  </div>
  
  
  <div id="footer">
  &copy; Kerstin Loop
  </div>
  <br class="clear"></div>
  
  </div>
</div>


</body>
</html>

es gibt dann noch eine datei c.css und h.css

Beitrag zuletzt geändert: 2.5.2010 1:26:58 von sessin

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city