ilch.de :: Forum :: Allgemein :: HTML, PHP, SQL,...

HTML:

<div>Hello World!</div><!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
<div id="wrapper">
    <div class="leiste_top"></div>
<!--menu-->
        <div id="topbar">
            <div class="leiste_top"></div>
            <div id="topbar_container">
                <div class="navbar">
                        <!--menupunkte-->
                        <ul>Home</ul>
                        <ul>Verein</ul>
                        <ul>Herren</ul>
                        <ul>Damen</ul>
                        <ul>Nachwuchs</ul>
                        <ul>Sponsoren</ul>
                 </div>
                <div class="socialmedia">
                    <div class="fb_icon"></div>
                    <div class="twitter_icon"></div>
                </div>
             </div>
        </div>
<!--kopfzeile mit logo-->
    <div id="kopfzeile">
        <div class="logo"></div>
    </div>
<!--kopfzeile mit logo-->
    <div id="content" style="clear:left">
            <div id="content_left">
                    <div class="maintext">Hier stehen die News.</div>
            </div>
            <div id="content_right">adasdasd</div>
    </div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
 
</html>

CSS:

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

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

@charset "utf-8";
/*------------------------------------*\
    $RESET
\*------------------------------------*/
/* A more considered reset; more of a restart... As per: csswizardry.com/2011/10/reset-restarted */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section {
    display: block;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
strong, b, mark {
    font-weight: bold;
    font-style: inherit;
}
em, i, cite, q, address, dfn, var {
    font-style: italic;
    font-weight: inherit;
}
abbr[title], dfn[title] {
    cursor: help;
    border-bottom: 1px dotted;
}
ins {
    border-bottom: 1px solid;
}
a, u, ins {
    text-decoration: none;
}
del, s {
    text-decoration: line-through;
}
pre, code, samp, kbd {
    font-family: monospace;
}
small {
    font-size: 0.75em;
}
img {
    border: none;
    font-style: italic;
}
input,
select, option, optgroup,
textarea {
    font: inherit;
}
 
 
 
/*------------------------------------*\
    $MAIN
\*------------------------------------*/
body {
    background: url('images/background.jpg') no-repeat fixed;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    -webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
    margin: 0 auto;
}
 
#wrapper {
    width: 100%;
    height: auto;
}
 
.leiste_top {
    width: 100%;
    height: 5px;
    background-color: #df0023;
    position: fixed;
}
 
#kopfzeile {
    width: 960px;
    height: auto;
    margin: 0 auto;
}
 
.logo {
    background: url('images/logo.png') no-repeat;
    width: 161px;
    height: 87px;
    margin-top: 40px;
    margin-bottom: 40px;
    float: left;
}
 
#content {
    width: 940px;
    height: auto;
    background: #fff;
    opacity: 0.25;
    padding: 10px;
    margin: 0 auto;
}
 
 
/*------------------------------------*\
    $Menu
\*------------------------------------*/
#topbar {
    background: url(images/menu_bg.png);
    width: 100%;
    height: 40px;
    margin: 0 auto;
    float: left;
    position: fixed;
}
 
#topbar_container {
    width: 960px;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
}
 
.navbar {
    width: auto;
    height: 40px;
    float: left;
    display: block; 
    margin-left: -20px;
}
 
ul {
    float: left;
    font-size: 13px;
    display: block;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
  
}
 
 
/*------------------------------------*\
    $SocialMedia
\*------------------------------------*/
.socialmedia {
    width: auto;
    height: 40px;
    float: right;
    display: block; 
}
.fb_icon {
    background: url('images/icons/facebook.png') no-repeat; 
}
 
 
/*------------------------------------*\
    $Content
\*------------------------------------*/
#content {
    width: 940px;
    height: auto;
    background: #fff;
    opacity: 1;
    padding: 10px;
    margin: 0 auto;
}
 
#content_left {
    width: 700px;
    height: auto;
    float: left;
}
 
#content_right {
    width: 200px; 
    height: auto;
    padding-left: 20px;
    float: left;
}
 
.maintext {
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

und jetzt möchte ich keine Punkte als Trennung sondern ein Bild einfügen.
Außerdem hab ich es mal wider mit clear:both vermasselt, denn beim content läuft der background nicht mit... verletzt

Zuletzt modifiziert von ekie am 01.04.2014 - 21:20:10

Ein einfaches clear im Parent funktioniert halt logischerweise nicht, stattdessen folgenden clearfix hack in deine CSS-Datei einfuegen:

micro clearfix hack
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	`/*` ` For modern browsers` `* 1. The space content is one way to avoid an Opera bug when the` `* contenteditable attribute is included anywhere else in the document.` `* Otherwise it causes space to appear at the top and bottom of elements` `* that are clearfixed.` * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. `/` `.cf:before,` `.cf:after {` `content:` `" ";` `/ 1 /` `display: table;` `/ 2 /` `}` `.cf:after {` `clear:` `both;` `}` `/` ` For IE 6/7 only` `* Include this rule to trigger hasLayout and contain floats.` `/` `.cf {` `zoom:` `1;` `}`

Und nun folgendes:

1	`<div` `id="content"` `style="clear:left">`

mit folgendem:

1	`<div` `id="content"` `class="cf">`

ersetzen.

Und wie ich sehe floatest du .logo auch, wieso auch immer kann ich so nicht erkennen. Dort natuerlich dem Parent dann auch die Klasse cf geben.

Am einfachsten ist es, wenn du das alles mal komplett, also mit Bildern und allem irgendwo hochlaedst. Ich hab jetzt so mal versucht darin rumzupfuschen, aber das ist maximal nervig ohne Bilder, etc.

Außerdem waere es einfacher fuer solche Dinge jsfiddle.net zu nutzen.

jsfiddle.net/PWZH5/

Geschlossen

	Zurück zu HTML, PHP, SQL,...

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » Menüpunkt Trennlinie