Beiträge von Billbos

Billbos

Ich habe auch eine Box herausgenommen. Wenn ich diese Box wieder einfüge wird sie über den Container herausragen, wie lässt sich das beheben? height: 100%, wirkt nicht!

Billbos

Ich finde du solltest dir erstmal Gedanken machen wie du zu einer stabilen und guten CSS-Fähigkeit kommst und dann auf Schnickschnak eingehst wie zum Beispiel PHP und Flash

Hier kannst dir die mal anschauen!

Liebe Grüße

http://www.amazon.de/Jetzt-lerne-ic…15526875&sr=1-2

http://www.amazon.de/CSS-Design-Die…5526875&sr=1-11

http://www.amazon.de/Objektorientie…15526910&sr=1-3

Billbos

Billbos

http://www.billbos.eu

Billbos

Hier ist der erste Code vom Layout

Code

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


*html {
margin: 0;
padding: 0;
}


body {
   background: #FFF url(../img/background.gif);
   font: 100.01% Arial, Helvetica, sans-serif;
   height: 100%;
   }

#container {
    background: #FFF url(../img/container/background_container_1.gif) top left repeat-y;
    width: 800px;
	height: 100%;
	margin: 0 auto;
	border: 1px solid;
	}

Alles anzeigen

DANN DIE NAVIGATION

Code

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




#navigation {
     width: 800px;
	 background: #003366;
	 margin: 0 auto;
	 padding: 12px 0px 12px 0px;
	 text-align: center;
	 border: none;
	 }

#navigation ul {
     display: inline;
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
	 }

#navigation ul li {
     display: inline;
	 padding: 0;
	 }

#navigation ul li a {
     color: #000;
	 background: #FFF;
	 margin: 0;
	 padding: 2px 5px;
	 text-decoration: none;
	 font-weight: bold;
	 }

#navigation ul li a:hover {
     background: #006cad;
	 border-bottom: 11px solid #FFF;
	 font-weight: bold;
	 }


/* Navigation Bottom */


#navibottom {
      width: 800px;
      background: #003366;
	  font-size: 12px;
	  margin: 0 auto;
	  text-align: left;
	  border-right: 1px solid #000;
	  border-bottom: 1px solid #000;
	  border-left: 1px solid #000;
	  }

#navibottom ul {
      display: inline;
      text-decoration: none;
	  padding: 0;
	  margin: 0;
	  }

#navibottom ul li {
      display: inline;
	  padding: 5px 7px;
	  }

#navibottom ul li a {
      color: #000;
	  background-color: #FFF;
	  margin: 0;
      padding: 0;
	  text-decoration: none;
	  font-weight: bold;
	  }

#navibottom ul li a:hover {
      color: #000;
	  background-color: #999;
	  font-weight: bold;
	  }

Alles anzeigen

FONTS

Code

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


/* Headings */


h1.angebote {
   color: #FFF;
   text-align: center;
   }

h1 {
	color: #FFF;
	text-align: center;
	padding: 5px; /*???*/
	margin: 0 0 10px 0;
}

.zusatzangebot {
   color: #000;
   font: Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: center;
   padding: 5px;
   }

/* Paragraphen */


.zangebot {
   text-align: left;
   color: #0000FF;
   font-weight: bold;
   }

.angebotlist {
   text-align: left;
   color: #0000FF;
   font-weight: bold;
   }

Alles anzeigen

DEFAULT (PROBLEM)?

Code

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


* html {
  margin: 0;
  padding: 0;
  }


/* Header */


#header {
    background: #003366 url(../flash/index_header/header_1.swf) no-repeat top;
	margin: 0 auto;
	}

/* Bildercontainer */


#piccontainer {
    width: 770px;
	height: 280px;
	background: #FFF;
	margin: 0 auto;
	border: 1px thin #000;
	}



/* Angebote */


   /* Box aussen */


#bildbox {
     background: #FFF;
	 float: left;
	 width: 150px;
	 height: 270px;
	 border: 1px solid #000;
     margin: 5px 5px 5px 0;
	 padding: 5px;
	 }

   /* Box innen */	 

#boxinside {
      background: #000;
	  width: 140px;
	  height: 100px;
	  border: none;
	  margin: 0px auto;
	  }

#zusatzangebot {
      width: 255px;
	  float: left;
	  height: 270px;
	  border: 1px dotted #000;
	  margin: 5px 0px 5px 0;
	  padding: 5px;
	  }

/* Zusatzangebot Liste */


#zlist ul {
	list-style-type: none;
	margin: 0;
    } 

#zlist li {
	list-style-image: url(../img/index/arrow-right.gif);
	padding: 3px;
	margin: 0;
    }

/* Angebot Liste */


#angebotlist ul {
    list-style-type: none;
	margin: 0;
	}

#angebotlist li {
    list-style-image: url(../img/index/arrow-right.gif);
	padding: 1px;
	margin: 0;
	}

Alles anzeigen

Billbos

HA wenn das meine Homepage wäre würde ich dir Recht geben!

Billbos

Also ich habe bei dem Container jetzt die min-height herausgenommen, wobei doch min-height für die Mindesthöhe steht und nicht für max-height?
Jetzt kommt ragt trotzdem alles aus dem container. Hier der Screenshot!

[Blockierte Grafik: http://billbos.eu/help/container.jpg]

Billbos

Hallo,

mein Problem besteht darin, dass mein Container die Höhe nicht anpasst.
Ich habe gesagt, dass er die Höhe des Inhaltes annehmen soll aber er macht es nicht.
Im Internetexplorer 7 geht es aber der Firefox macht mir Probleme, obwohl ich angegeben habe height: 100%;

Hier die Stylesheets

Vielen Dank

Billbos

Code

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


*html {
margin: 0;
padding: 0;
}


body {
   background: #FFF url(../img/background.gif);
   font: 100.01% Arial, Helvetica, sans-serif;
   }

#container {
    background: #FFF url(../img/container/background_container_1.gif) top left repeat-y;
    width: 800px;
	height: 100%;
	min-height: 500px;
	margin: 0 auto;
	border: 1px solid;
	}

Alles anzeigen

Billbos

Also ich bin zur Zeit bei Strato das kostet mich in drei Monaten 59.30 €, deshalb werde ich den Vertrag kündigen und werde zu
https://www.1blu.de/start.php wechseln!

Billbos

Hey,

also deren Beispiele schauen ganz okay aus, aber wer sagt, dass sie sich dabei Mühe geben und alles funktioniert?
Wenn ich du wäre, würde ich hier im Forum fragen, ob dir jemand die Seite erstellen kann

Mit freundlichen Grüßen

Billbos

Billbos

Hallo,

mir ist nach längerem Nachdenken keine Idee eingefallen wie ich folgendes Problem in den Griff bekommen kann!
Ich möchte, dass das list-style-image den gleichen Abstand im beiden Internet Explorern bekommt, kann mir jemand sagen wie ich das realisieren kann?
Mit Abstand meine ich zu den li - Elementen.

Liebe Grüße

Billbos

FIREFOX

[Blockierte Grafik: http://billbos.eu/help/FIREFOX.JPG]

INTERNET EXPLORER 7

[Blockierte Grafik: http://billbos.eu/help/ie7.JPG]

Code

#zlist ul {
	list-style-type: none;
	margin: 0;
    } 

#zlist li {
	list-style-image: url(../img/index/arrow-right.gif);
	padding: 3px;
	margin: 0;
    }

/* Angebot Liste */


#angebotlist ul {
    list-style-type: none;
	margin: 0;
	}

#angebotlist li {
    list-style-image: url(../img/index/arrow-right.gif);
	padding: 1px;
	margin: 0;
	}

Alles anzeigen

ALTERNATIV DAZU

http://www.billbos.eu

Billbos

Soweit hat es geklappt dankeschön.
Jetzt habe ich noch eine Frage, das list-style-image hat im Firefox mehr Abstand als im Internetexplorer zur der Liste. Wie kann ich das Problem beheben?
Ich möchte einen gleichgroßen Abstand haben!

Mit freundlichen Grüßen

Billbos

Billbos

Hallo,

ich habe folgendes Problem, ich habe eine Box in der ich eine Überschrift habe H1 und darunter eine ul - list, die Überschrift hat im Firefox oben einen großen Abstand vom Boxenrand und die Liste ist zu weit in der Mitte in beiden Explorern.
Ich möchte, dass die Überschrift knapp am oberen Boxenrand grenzt und die List an nähr an die linke Seite der Box anrückt!

FIREFOX

[Blockierte Grafik: http://www.billbos.eu/help/FIREFOX.JPG]

INTERNET EXPLORER 7

[Blockierte Grafik: http://www.billbos.eu/help/ie7.JPG]

Wie gehe ich an das Problem ran?

Hier sind meine Stylesheets!

Danke

DIE BOXENMODELLE

Code

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


* html {
  margin: 0;
  padding: 0;
  }


/* Header */


#header {
    background: #003366 url(../flash/index_header/header_1.swf) no-repeat top;
	margin: 0 auto;
	}

/* Bildercontainer */


#piccontainer {
    width: 770px;
	height: 270px;
	background: #FFF;
	margin: 0 auto;
	border: 1px thin #000;
	}



/* Angebote */


#bildbox {
     background: #FFF;
	 float: left;
	 width: 150px;
	 height: 255px;
	 border: 1px solid #000;
     margin: 5px 5px 5px 0;
	 padding: 5px;
	 }

#boxinside {
      background: #000;
	  width: 140px;
	  height: 100px;
	  border: none;
	  margin: 0px auto;
	  }

#zusatzangebot {
      width: 255px;
	  float: left;
	  height: 255px;
	  border: 1px dotted #000;
	  margin: 5px 0px 5px 0;
	  padding: 5px;
	  }

/* Zusatzangebot Liste */


#zlist ul {
      list-style-type: none;
	  margin: 0 auto;
	  }

#zlist li {
      list-style-image: url(../img/index/arrow-right.gif);
	  padding: 3px;
	  }

Alles anzeigen

DIE SCHRIFTEN

Code

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


/* Headings */


h1.angebote {
   color: #FFF;
   text-align: center;
   }

h1 {
   color: #FFF;
   text-align: center;
   padding: 5px;
   }

.zusatzangebot {
   color: #000;
   font: Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: center;
   padding: 5px;
   }

/* Paragraphen */


.zangebot {
   text-align: left;
   color: #0000FF;
   font-weight: bold;
   }

Alles anzeigen

DIE INDEXPAGE

HTML

<!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>


<link rel="shortcut icon" type="image" href="favicon.ico" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Billbos | Home</title>


<link rel="stylesheet" type="text/css" href="css/LAYOUT.css" />
<link rel="stylesheet" type="text/css" href="css/FONT_index.css" />
<link rel="stylesheet" type="text/css" href="css/NAVIGATION.css" />
<link rel="stylesheet" type="text/css" href="css/default_index.css" />


<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>


<body background="img/background.gif">


<div id="container">
 
 <div id="header">
   <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','125','src','flash_/index_header/header_1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash_/index_header/header_1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="125">
     <param name="movie" value="flash_/index_header/header_1.swf" />
     <param name="quality" value="high" />
     <embed src="flash_/index_header/header_1.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="125"></embed>
   </object></noscript>
 </div>
 




<div id="navigation">
 <ul>
  [*][url='index.html']Home[/url]
  [*][url='billbos.html']Billbos[/url]
  [*][url='angebote.html']Angebote[/url]
  [*][url='htmlcss.html']HTML / CSS[/url]
  [*][url='flash.html']Flash[/url]
  [*][url='bilder.html']Bilder[/url]
  [*][url='kontakt.html']Kontakt[/url]
  [*][url='impressum.html']Impressum[/url]
 [/list]
</div>








  
  <div id="boxcontainer">




<div id="piccontainer">


 <div id="bildbox">
  <div id="boxinside">
  </div>
 </div>
 
<div id="bildbox">
 <div id="boxinside">
 </div>
</div>


<div id="bildbox">
 <div id="boxinside">
 </div>
</div>




<div id="zusatzangebot">
 <h1><span class="zusatzangebot">Homepage nach Wunsch?</span></h1>
  <ul id="zlist">
   [*]<span class="zangebot">Sein Sie beim Desginen dabei</span>
   [*]<span class="zangebot">Eigene Grafiken verwenden</span>
   [*]<span class="zangebot">Server Einrichtung</span>
   [*]<span class="zangebot">Lernen Sie mit designen</span>
   [*]<span class="zangebot">Homepage Update</span>
  [/list]
</div>




</div>


      
     </div>







</div>






<div id="navibottom">
 <ul>
  [*][url='#']Top[/url]
  [*][url='http://www.billbos.eu/index.html']Home[/url]
  [*][url='#']Forum[/url]
  [*][url='kontakt.html']Kontakt[/url]
  [*][url='impressum.html']Impressum[/url]
 [/list]
</div>








</body>
</html>

Alles anzeigen

[/code]

Billbos

Hey Leute echt vielen Dank euch, das hat geklappt...

Mein Code leutet jetzt ganz oben html * { margin: 0; padding: 0; }

Ihr seit klasse vielen Dank

Billbos

Hi, ja kann ich machen hier mal die ganze Page eingepackt!

http://www.billbos.eu/help/hp.zip

Danke

Billbos

Hier ist eine gute Seite, wo du alles findest...

http://de.selfhtml.org/

Wenn es darum geht Navigationen zu erstellen kann ich dir diese Seite bestens empfehlen!

http://css.maxdesign.com.au/listamatic/

Und wenn du ganz neu beginnst, kauf dir ein paar Bücher HTML, CSS und vielleicht später Flash dazu!

Liebe Grüße

Billbos

Billbos

Hi,

ich weiss grade ehrlich nicht genau wo das Problem liegt, ich bin mir grade nicht sicher, aber eine Sache habe ich gefunden, die ich zum Beispiel nicht verwende.

Code

background:#282627 url(|'|images/background.png|'|) repeat-x;


background:#282627 url(|'|images/bg_general.gif|'|) no-repeat top center;

Das sind deine beiden Angaben.

Bei mir stehen oben die kleinen Striche nicht, die ich mit den Strichen getrennt habe.
Lass die mal weg und probier es nochmal.

Liebe Grüße

Billbos

Billbos

Hier sind nochmal die zwei Unterschiede an denen ich mir echt die Zähne ausbeißen könnte!

Hier so sieht es im Internetexplorer aus, genau richtig.

[Blockierte Grafik: http://www.billbos.eu/help/ie7.JPG]

Hier ist es im Firefox mit Abstand, dieser soll weg.

[Blockierte Grafik: http://www.billbos.eu/help/firefox.JPG]

Das Stylesheet sieht auch nach wie vor so aus!

Code

{
margin: 0;
padding: 0;
}


body {
    background: #FFF url(../img/all%20pages/BODY_BACKGROUND.gif);
	font: 100.01% Arial, Helvetica, sans-serif;
	}

#maincontainer {
     width: 800px;
	 height: 100%;
	 min-height: 750px;
	 background: #FFF;
	 margin-left: auto;
	 margin-right: auto;
	 border: 5px solid #0000FF;
	 }

#header {
     background: #FFF url(../flash/header_3.swf) no-repeat;
	 width: 800px;
	 height: 125px;
	 }

#container {
	width: 790px;
	height: auto;
	margin: 25px auto 0 auto;
	}

#footer {
	width: 800px;
	margin: 0px auto;
	height: 45px;
	border-left: 5px solid #0000FF;
	border-right: 5px solid #0000FF;
	border-bottom: 5px solid #0000FF;
	border-top: 0;
	}

Alles anzeigen

Liebe Grüße

Concorde

Billbos

Hi,

danke schonmal für eure Tipps, das Problem besteht nach wie vor.
Beide dieser Sachen sollen in der Mitte des Bildschirms plaziert werden, also mit margin: 0px auto; <---- 0px weil ich jetzt oben und unten keinen Abstand haben möchte.

@ Pinales margin: 0 und auto, weil der Footer ja auch mittig plaziert werden soll.

Danke trotzdem schonmal für die Mühe

Liebe Grüße

Billbos

Billbos

Hi,

endweder du versucht dine Buttons in eine Tabelle zu packen, mit Java das Problem zu lösen oder du schaust dir diese Seite mal an, da bekommst du alle Navigationsmöglichkeiten mit Vorschau und Code

http://css.maxdesign.com.au/listamatic/

Viel Erfolg

Billbos

Hi,

wenn du eine Seite brauchst wo du viele Beispiele bekommen möchtest,
mit vertikalen und horizontalen Navigationen, dann schau dir die an

http://css.maxdesign.com.au/listamatic/

Beste Grüße

Billbos

Beiträge von Billbos

Containerhöhe

Onlineshop

Containerhöhe

Containerhöhe

Containerhöhe

Containerhöhe

Containerhöhe

TIP: Hoster mit EU Domain für ein Jahr kostenlos

Was haltet Ihr davon?

List - Style Abstände

Unterschiedliche Abstände zwischen FIREFOX UND IE 7

Unterschiedliche Abstände zwischen FIREFOX UND IE 7

Abstände im Firefox 2.0, 3.0 und IE 7

Abstände im Firefox 2.0, 3.0 und IE 7

Webdesignerneuling

Brauche dringend Hilfe in Sachen CSS

Abstände im Firefox 2.0, 3.0 und IE 7

Abstände im Firefox 2.0, 3.0 und IE 7

Buttons werden verkürzt angezeigt

menu mit onMouseOver u. onMouseOut