ilch.de :: Forum :: Allgemein :: Design- und Projektvorstellungen

Zitat geschrieben von Sonc

pass das design doch auf den firefox an und korrigier dann eben für den iexplore mit nem if lte IE7

hehe danke für die antowrt aber das würd ich ja gerne xD
ich hab das nur nach meinen css kenntnissen gemacht und dachte das geht dann..
was muss ich den ändern für den FF spezifisch?

Stell hier mal den Code rein vlt hilft das:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

@charset "utf-8";
/* CSS Document */
 
body {
background-color: #ffffff;
margin-top: 10px;
font-family: "Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;
font-size: 11px;
color: #414141;
}
/* Layout Start */
#layout {
width: 600px;
height: auto;
margin: auto;
padding: 1px;
border: 1px solid #e3e3e3;
}
 
.title {
color: #414141;
font-size: 11px;
font-weight: bold;
position: relative;
margin-top: 4px;
margin-left: 4px;
margin-right: 4px;
}
/* Layout End */
/* Welcome Start */
#welcome {
background-color: #e3e3e3;
width: 600px;
height: 23px;
margin: auto;
}
/* Welcome End */
/* Header Start */
#header_switch {
background-image: url(../header/news.png);
width: 600px;
height: 80px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header End */
/* Navigation Start */
.grey #waxcontainer {
position: relative;
height: 48px;
background: #e3e3e3;
width: 600px;
font-family: "Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;
}
 
.grey #waxnav {
position: relative;
height: 25px;
font-size: 11px;
font-weight: bold;
background: #fff url(/code/wax/images/wax/greywax_bottom.gif) repeat-x bottom left;
}
 
.grey #waxnav ul {
margin: 0px;
padding: 0 0 4px 0;
list-style-type: none;
width: auto;
float: left;
}
 
.grey #waxnav ul li {
display: block;
float: left;
margin: 0 1px;
}
 
.grey #waxnav ul li a {
display: block;
float: left;
color: #414141;
text-decoration: none;
padding: 0 0 0 12px;
height: 21px;
line-height: 195%;
}
 
.grey #waxnav ul li a span {
padding: 0 12px 0 0;
}
 
.grey #waxnav ul li a:hover,.grey #waxnav ul li a.current {
color: #fff;
background: #575757 url(/code/wax/images/wax/greywax_navtopleft.gif) no-repeat top left;
}
 
.grey #waxnav ul li a:hover span,.grey #waxnav ul li a.current span {
display: block;
width: auto;
background: #575757 url(/code/wax/images/wax/greywax_navtopright.gif) no-repeat top right;
}
/* Navigation End */
/* Content Start */
#content {
width: 600px;
height: auto;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
/* Page Start */
#page {
width: 450px;
height: auto;
float: left;
}
 
.page_content {
width: 440px;
height: auto;
float: left;
margin-right: 10px;
}
/* Page End */
/* Box Start */
#box {
width: 150px;
height: auto;
float: left;
}
 
.box_header {
background-color: #e3e3e3;
width: 150px;
height: 23px;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
 
.box_content {
width: 150px;
height: auto;
float: left;
}
/* Box End */
/* Content End */
/* Footer Start */
#footer {
background-color: #e3e3e3;
width: 600px;
height: 23px;
float: left;
}
 
#copyright {
color: #414141;
font-size: 9px;
font-weight: bold;
position: relative;
margin-top: 4px;
margin-left: 4px;
margin-right: 4px;
}
 
#copyright a {
color: #333333;
text-decoration: none;
}
/* Footer End */

<!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" />
<title>News</title>
<link href="css/_style_news.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<!-- Layout Start -->
<div id="layout">
<!-- Welcome Start -->
  <div id="welcome">
    <div class="title">Willkommen&nbsp;auf&nbsp;pc-community.ch</div>
  </div>
<!-- Welcome End -->
<!-- Header Start -->
  <div id="header_switch"></div>
<!-- Header End -->
<!-- Navigation Start -->
  <div class="grey">
    <div id="waxcontainer">
      <div id="waxnav">
        <ul>
          <li><a href="news.html" title="Aktuelle Informationen" class="current"><span>News</span></a></li>
          <li><a href="archiv.html" title="Bisherige News"><span>Archiv</span></a></li>
          <li><a href="angebote.html" title="Meine Leistungen"><span>Angebote</span></a></li>
          <li><a href="portfolio.html" title="Beendete Arbeiten"><span>Portfolio</span></a></li>
          <li><a href="downloads.html" title="Kostenlose Downloads"><span>Downloads</span></a></li>
          <li><a href="kontakt.html" title="Kontaktieren Sie mich"><span>Kontakt</span></a></li>
        </ul>
      </div>
    </div>
  </div>
<!-- Navigation End -->
<!-- Content Start -->
  <div id="content">
<!-- Page Start -->
    <div id="page">
<!-- Page Content Start -->
      <div class="page_content">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.</div>
<!-- Page Content End -->
    </div>
<!-- Page End -->
<!-- Box Start -->
    <div id="box">
<!-- Box Angebot 1 Start -->
      <div class="box_header">
        <div class="title">Angebot&nbsp;#1</div>
      </div>
      <div class="box_content">Lorem ipsum dolor</div>
<!-- Box Angebot 1 End -->
<!-- Box Angebot 2 Start -->
      <div class="box_header">
        <div class="title">Angebot&nbsp;#2</div>
      </div>
      <div class="box_content">Lorem ipsum dolor</div>
<!-- Box Angebot 2 End -->
<!-- Box Angebot 1 Start -->
      <div class="box_header">
        <div class="title">Links</div>
      </div>
      <div class="box_content">Lorem ipsum dolor</div>
<!-- Box Angebot 1 End -->
<!-- Box Angebot 2 Start -->
      <div class="box_header">
        <div class="title">Letzte&nbsp;Arbeiten</div>
      </div>
      <div class="box_content">Lorem ipsum dolor</div>
<!-- Box Angebot 2 End -->
    </div>
<!-- Box End -->
  </div>
<!-- Content End -->
<!-- Footer Start -->
  <div id="footer">
    <div id="copyright">Copyright&nbsp;by&nbsp;<a href="http://www.pc-community.ch/">pc-community.ch</a></div>
  </div>
<!-- Footer End -->
</div>
<!-- Layout End -->
</body>
</html>

mfG

Geschlossen

	Zurück zu Design- und Projektvorstellungen

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » Design- und Projektvorstellungen » HTML Layout