 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
einsiedler
Threadersteller
Dabei seit: 13.08.2015
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 13.08.2015 14:46
Titel Mehrere divs im einem gesamt-div und ein floating Problem |
  |
|
Hallo @ all,
ich habe folgendes Problem:
Ich möchte das rot eingekästelte div (worin sich die orange gekästelten
(unter)-divs befinden neben dem blau eingekästelten div anordnen
Ich weiss, das die breite des rot-eingekästelten div zusammen mit dem blau eingekästelten div BREITER als der viewport ist.
Das soll auch so sein, ich möchte eine horizontal scrollbare Webseite.
Leider muss ich die orange eingekästelten (unter)-divs in einem zusammenhängenden (hier rot) zusammenfassen, da ich später mit anker zu dem entsprechenden (unter)-div springen möchte!
Dabei wird der Inhalt der gelb umrandeten divs später noch breiter, hier zur Anschauung hab ich die mal nicht so breit gemacht!
http://www.tassilo.sturm.serverma.de/test_index2.html
Ich habe alles ausprobiert: display-inline-block hier, position: ablosute;
dort, in allen erdenklichen variationen!
Wer kann mir dabei bitte Helfen?
Ich bin am verzweifeln!
Grüsse der einsiedelnde
Zuletzt bearbeitet von einsiedler am Do 13.08.2015 14:55, insgesamt 5-mal bearbeitet
|
|
| |
  |
 |
Kartöffelchen
Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht: 
|
Verfasst Do 13.08.2015 21:31
Titel
|
|
|
HTML
| Code: | <!DOCTYPE html>
<html lang="de">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Waldfrieden -- Tassilo Sturm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" href="img.ico" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/test2.css"/>
</head>
<body>
<!-- Anfang Content-Bereich -->
<header> <h1>Waldfrieden -- Tassilo Sturm </h1> <h2>Rauminstallationen </h2> </header>
<div id="wrapper">
<div id="sidebar_linkscontent">
<p>
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 e
</p>
</div>
<div class="main_contentframe">
<div id="main_content">
<p>
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 e
</p>
</div>
<div id="other_content">
<p>
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 e
</p>
</div>
<div id="another_content">
<p>
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 e
</p>
</div>
<div id="more_content">
<p>
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 e
</p>
</div>
<div id="muchmore_content">
<p>
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 e
</p>
</div>
</div> <div class="clear"></div>
</div>
<footer class="contentinfo">
<nav class="footermenue">
<ul>
<li> <a href="#">HOME</a></li>
<li> <a href="#">WORKS</a></li>
<li> <a href="#">TEXT</a> </li>
<li> <a href="#">CV</a> </li>
<li> <a href="#">KONTAKT & IMPRESSUM</a> </li>
</ul>
</nav>
</footer>
<!-- ENDE Content-Bereich -->
</body>
</html> |
CSS
| Code: | @charset "utf-8";
/* CSS Document */
body {
background-color: #ffffff;
color: #000000;
font-family: "Ubuntu",sans-serif;
margin: 0;
width: 100%;
}
------------------- Anfang �BERSCHRIFTEN -------------------------- > h1 {
color: #000000;
font-family: "Cabin Sketch",cursive;
font-size: 3.5em;
line-height: 0.9em;
margin: 0.3em 0 0;
padding: 0;
}
h2 {
color: #000000;
font-family: "Cabin Sketch",cursive;
font-size: 2em;
line-height: 0.9em;
margin: 0;
padding: 0;
}
figure img {
height: auto;
margin: 0;
padding: 0;
width: 100%;
}
------------------- Ende FOTOS -------------------------- > p {
font-size: 1.1em;
line-height: 1em;
list-style-type: none;
margin: 0;
padding: 0;
}
header {
border: 3px dotted grey;
margin-left: 5em;
padding: 0;
width: 85%;
}
footer {
border: 3px dotted indigo;
clear: both;
margin-left: 5em;
padding: 0;
width: 85%;
}
.clear{
clear:both;
}
#wrapper {
border: 3px dotted black;
width: 3000px;
}
#sidebar_linkscontent {
border: 3px dotted blue;
float: left;
margin-left: 5em;
width: 20%;
}
.main_contentframe {
margin-left:685px;
border: 3px dotted red;
height:178px;
}
#main_content {
border: 3px dotted orange;
display: inline;
float: left;
width: 25%;
}
#other_content {
border: 3px dotted orange;
display: inline;
float: left;
width: 15%;
}
#another_content {
border: 3px dotted orange;
display: inline;
float: left;
width: 15%;
}
#more_content {
border: 3px dotted orange;
display: inline;
float: left;
width: 15%;
}
#muchmore_content {
border: 3px dotted orange;
display: inline;
float: left;
width: 15%;
}
------------------- Anfang FOTOBLOCK horizontal -------------------------- > .fotoabfolge_horizontal {
border: 3px dotted cadetblue;
padding: 0;
width: 3545px;
}
.fotoblock_ausschnitt_main {
border: 3px dotted peru;
width: 900px;
}
.fotoblock_ausschnitt_eins {
border: 3px dotted peru;
width: 900px;
}
.fotoblock_ausschnitt_zwei {
border: 3px dotted peru;
width: 900px;
}
.fotoblock_ausschnitt_drei {
border: 3px dotted peru;
width: 900px;
}
.fotoblock_ausschnitt_vier {
border: 3px dotted peru;
width: 900px;
}
.footermenue li {
border: 1px dashed darkorange;
display: inline-block;
font-size: 1.1em;
list-style: outside none none;
margin: 0;
padding: 0;
}
.footermenue a, footermenue span {
border: 1px dashed red;
display: inline-block;
font-size: 1.1em;
margin: 0;
padding: 0.4em 1em 0.4em 0.4em;
}
.bildblockmenue ul {
border: 1px dashed springgreen;
float: right;
margin: 0;
padding: 0.2em 0.3em 1em 0.2em;
}
.bildblockmenue li {
border: 1px dashed darkorange;
display: inline-block;
font-size: 1.1em;
list-style: outside none none;
margin: 0;
padding: 0;
}
.bildblockmenue a, bildblockmenue span {
border: 1px dashed red;
display: inline-block;
font-size: 1.1em;
margin: 0;
padding: 0.4em 1em 0.4em 0.4em;
}
.sidebarmenue ul {
border: 1px dashed springgreen;
margin: 0;
padding: 0.2em 0.3em 1em 0.2em;
}
.sidebarmenue li {
border: 1px dashed darkorange;
font-size: 1.1em;
list-style: outside none none;
margin: 0;
padding: 1em;
}
.sidebarmenue a, sidebarmenue span {
border: 1px dashed red;
font-size: 1.1em;
margin: 0;
padding: 0.4em 1em 0.4em 0.4em;
} |
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
Zentrieren von floating DIVs
[CSS] Floating DIV und Hintergrund anderer DIVs
css floating problem
Problem mit DIVS
problem mit IE und divs
CSS Problem mit Divs
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
