Hallo in die Runde
ich versuche mich gerade an einem css layout,
Vielleicht kann mir ja hier jemand helfen, wäre super.
ich möchte einmal die beiden Inhalte der beiden content container
zentriert haben
zum anderen mal am rechten bzw. linken Rand ausgerichtet (z.B. Liste)
das Zentrieren klappt einigermaßen im Opera, aber im IE leider nicht
habe schon durchgegoogelt, und vieles probiert, aber es klappt nicht.
Mein test
(eine seite ist unter test2 noch zu sehen, mit Liste)
und css dazu:
body {
/* 101% zur font-size-Korrektur für Opera bis v.6 */
background-color: #00FF00;
font-size : 12px;
font-family : Arial, Verdana, SunSans-Regular, Sans-Serif;
color : #564b47;
padding : 0px;
margin : 10px;
text-align : center;
}
#banner {
background-color: #FF0000;
text-align : center;
padding : 0;
height: 150px;
}
#banner img {
padding : 0px 0px;
margin-top: 4px;
}
#gelb {
font-size : 20px;
font-weight : bold;
padding : 5px 10px;
margin : 0;
background-color : #ffff00;
width : 794px;
}
#aussen {
width : 810px;
margin-bottom : 10px;
margin : 0 auto;
background : transparent;
padding : 0;
border-right : 1px solid #2e7240;
border-left : 1px solid #2e7240;
border-top : 0;
border-bottom : 0;
min-width: 810px;/*Opera/Mozilla brauchen dies*/
}
#main {
width: 100%;
/* für IE Win */
text-align : center;
width : 810px;
margin-bottom : 10px;
margin : 0 auto;
background-image : url(bilder/hi_grafik2.jpg);
background-repeat : repeat;
padding : 0;
border-right : 1px solid #2e7240;
border-left : 1px solid #2e7240;
border-top : 0;
border-bottom : 0;
height : auto;
}
#content1 {
background: transparent;
padding : 0;
text-align : center;
margin : 0 0 0 0;
min-width : 405px;
width: 47,4%;
float : left;
height : 530px;
display: inline;
vertical-align: middle;
}
div#content1 {
min-height : 530px;
display: inline;
margin-left: auto;
margin-right:auto;
}
#content2 {
background : transparent;
padding : 0;
margin : 0 0 0 0;
text-align : center;
width : 405px;
width: 48%;
height : 530px;
float : left;
display: inline;
vertical-align: middle;
margin-left: auto;
margin-right:auto;
}
div#content2 {
min-height : 530px;
display: inline;
}
p, pre {
padding : 5px 10px;
margin : 0;
}
#navcontainer
{
margin: 0;
padding: 3px 0 3px 3px;
width: 810;
line-height: 1.50;
background-color: #17937d;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
height: 15px;
}
ul#navlist
{
display: inline;
list-style: none;
}
ul#navlist li
{
float: left;
width: auto;
margin-right: 5px;
border: 0px solid #17937d;
background-color: #d5f5e9;
font-size: 11px;
}
ul#navlist li a
{
padding: 0 10px;
line-height: 1.75;
text-decoration: none;
color: #03C;
}
ul#navlist li a#current
{
background-color: #669;
color: #fff;
}
ul#navlist li a:hover, ul#navlist a#current:hover
{
background-color: #777;
color: #fff;
}
ul#navlist li a:active, ul#navlist li#active a#current:active
{
background-color: #f63;
color: #fff;
}
.clear {
clear : both;
}
#logo1
{
float:left;
margin: 5px 15px 0px 0px;
padding: 15px;
width: 140px;
}
#logo2
{
float:left;
margin: 5px 15px 0px 0px;
padding: 15px;
}
Vielen Dank, ich bin gerade fast am Verzweifeln *g
Johanna
ich versuche mich gerade an einem css layout,
Vielleicht kann mir ja hier jemand helfen, wäre super.
ich möchte einmal die beiden Inhalte der beiden content container
zentriert haben
zum anderen mal am rechten bzw. linken Rand ausgerichtet (z.B. Liste)
das Zentrieren klappt einigermaßen im Opera, aber im IE leider nicht
habe schon durchgegoogelt, und vieles probiert, aber es klappt nicht.
Mein test
(eine seite ist unter test2 noch zu sehen, mit Liste)
und css dazu:
body {
/* 101% zur font-size-Korrektur für Opera bis v.6 */
background-color: #00FF00;
font-size : 12px;
font-family : Arial, Verdana, SunSans-Regular, Sans-Serif;
color : #564b47;
padding : 0px;
margin : 10px;
text-align : center;
}
#banner {
background-color: #FF0000;
text-align : center;
padding : 0;
height: 150px;
}
#banner img {
padding : 0px 0px;
margin-top: 4px;
}
#gelb {
font-size : 20px;
font-weight : bold;
padding : 5px 10px;
margin : 0;
background-color : #ffff00;
width : 794px;
}
#aussen {
width : 810px;
margin-bottom : 10px;
margin : 0 auto;
background : transparent;
padding : 0;
border-right : 1px solid #2e7240;
border-left : 1px solid #2e7240;
border-top : 0;
border-bottom : 0;
min-width: 810px;/*Opera/Mozilla brauchen dies*/
}
#main {
width: 100%;
/* für IE Win */
text-align : center;
width : 810px;
margin-bottom : 10px;
margin : 0 auto;
background-image : url(bilder/hi_grafik2.jpg);
background-repeat : repeat;
padding : 0;
border-right : 1px solid #2e7240;
border-left : 1px solid #2e7240;
border-top : 0;
border-bottom : 0;
height : auto;
}
#content1 {
background: transparent;
padding : 0;
text-align : center;
margin : 0 0 0 0;
min-width : 405px;
width: 47,4%;
float : left;
height : 530px;
display: inline;
vertical-align: middle;
}
div#content1 {
min-height : 530px;
display: inline;
margin-left: auto;
margin-right:auto;
}
#content2 {
background : transparent;
padding : 0;
margin : 0 0 0 0;
text-align : center;
width : 405px;
width: 48%;
height : 530px;
float : left;
display: inline;
vertical-align: middle;
margin-left: auto;
margin-right:auto;
}
div#content2 {
min-height : 530px;
display: inline;
}
p, pre {
padding : 5px 10px;
margin : 0;
}
#navcontainer
{
margin: 0;
padding: 3px 0 3px 3px;
width: 810;
line-height: 1.50;
background-color: #17937d;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
height: 15px;
}
ul#navlist
{
display: inline;
list-style: none;
}
ul#navlist li
{
float: left;
width: auto;
margin-right: 5px;
border: 0px solid #17937d;
background-color: #d5f5e9;
font-size: 11px;
}
ul#navlist li a
{
padding: 0 10px;
line-height: 1.75;
text-decoration: none;
color: #03C;
}
ul#navlist li a#current
{
background-color: #669;
color: #fff;
}
ul#navlist li a:hover, ul#navlist a#current:hover
{
background-color: #777;
color: #fff;
}
ul#navlist li a:active, ul#navlist li#active a#current:active
{
background-color: #f63;
color: #fff;
}
.clear {
clear : both;
}
#logo1
{
float:left;
margin: 5px 15px 0px 0px;
padding: 15px;
width: 140px;
}
#logo2
{
float:left;
margin: 5px 15px 0px 0px;
padding: 15px;
}
Vielen Dank, ich bin gerade fast am Verzweifeln *g
Johanna