• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[CSS] in runden Ecken mehrere divs floaten

S

Schneider

New member
Schon wieder ich :D

Ich habe von SELFHTML die Technik mit den runden Ecken mit divs übernommen. Diese nehme ich nun als Inhalt (soll heißen alle inhalte kommen in diesen div mit den runden ecken) jetzt würde ich gerne ganz oben (also im div mit den runden ecken) eine horizontale Navigation erstellen, doch sobald ich hier float:left mache verschwinden meine runden ecken.

Ich würde später auch gerne in den runden ecken nochmals 3 divs erstellen (quasi 3 spaltig). Doch leider kann ich nichts mehr floaten ohne das hier die runden ecken verschwinden

Quellcode:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>MESSERLE - Vielfalt für Ihrem Vorteil</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Written by hand" />
 <link rel="stylesheet" type="text/css" href="css/links.css">
 <link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
<!--
/*
 * Globale Definitionen
 */
 
html, body {
width: 760px;
margin: 0 auto;
padding: 0;
font-size: 90%;
font-family: Tahoma; Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}

/* Ende Globale Definitionen*/

/*
 * Runde Boxen
 */

.box {
background-color: #8FCBDC;
margin: 0;
padding: 0;
}

.ro {
background-color: #8FCBDC;
background:url(../images/box_ro.gif) top right no-repeat;
}

.lo {
background-color: #8FCBDC;
background:url(../images/box_lo.gif) top left no-repeat;
}

.ru {
background-color: #8FCBDC;
background:url(../images/box_ru.gif) bottom right no-repeat;
}

.lu {
background-color: #8FCBDC;
background:url(../images/box_lu.gif) bottom left no-repeat;
}

.navigation {
margin: 0;
padding: 0;
}

.navigation ul {
clear: left;
list-style-type: none;
margin: 0;
padding: 0 0 0 10px;
}
-->
</style>
</head>
<body>
<!-- diese werden benötigt um einen runden Container zu erzeugen -->
<div class="box">
	<div class="ro">
		<div class="lo">
			<div class="ru">
				<div class="lu">
<!-- Ende der benötigten Klassen -->				
					<div class="navigation">
						<ul>
							<li>Home</li>
							<li>Shop</li>
							<li>Service</li>
							<li>Kontakt</li>
							<li>Messerle</li>
							<li>Newsletter</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>	
</div>
</body>
</html>
 
Ich geb' Dir das mal als Hausaufgabe mit ;)
Code: 
<?xml version="1.0"?>
<!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" xml:lang="de">
<head>
<title>Titel</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
/*<![CDATA[*/
* {
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-size:1.0em;
  line-height:1.2em;
  color:#435359;
  margin:0px;
  padding:0px;
  border:0px;
}
body {
  text-align:center;
  background:#6794af;
}
#container {
  width:755px;
  margin:0px auto;
  margin-top:19px;
  margin-bottom:19px;
  text-align:center;
}
p {padding:10px 20px 10px 20px;}
h1,h2,h3 {font-size:1.2em;padding:10px 0px 10px 0px;}
a.menu:link, a.menu:visited, a.menu:hover, a.menu:active {
  font-weight:bold;
  text-decoration:none;
  padding:1px 10px 1px 10px;
}
a.menu:hover {
  border-bottom:1px dotted #435359;
}
.box { width:100%; background:#f0fbff; margin:0px auto; text-align:left;}
.box .top, .box .bottom { display:block; background:#6794af;}
.box .top b, .box .bottom b { display:block; height:1px; overflow:hidden; background:#f0fbff;}
.box .r1 { margin:0 5px;}
.box .r2 { margin:0 3px;}
.box .r3 { margin:0 2px;}
.box .top .r4, .box .bottom .r4 { margin:0 1px; height:2px;}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div class="box" style="text-align:center;">
<b class="top">
<b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
	<h1>1. Überschrift</h1>
        <h2>2. Überschrift</h2>
        <h3>3. Überschrift</h3>
<a href="" class="menu">Link</a>
<a href="" class="menu">Link</a>
<a href="" class="menu">Link</a>
<a href="" class="menu">Link</a>
<a href="" class="menu">Link</a>
<br style="clear:both;" />
<b class="bottom">
<b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>

<div class="box" style="margin-top:19px;">
<b class="top">
<b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<b class="bottom">
<b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>
</div>
</body>
</html>
Probiere damit mal ein wenig rum...
 
danke für eure Hilfe durch Zufall bin auf diese Seite gestoßen wo mir fast scho die komplette Lösung geboten wird.

Danke nochmals für eure Hilfe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben