zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3-Spalten-Layout - nicht mit float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.12.2013, 17:14
Benutzerbild von Lisiah
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Ort: Hessen
Beiträge: 5
Lisiah befindet sich auf einem aufstrebenden Ast
Standard 3-Spalten-Layout - nicht mit float

Hallo erstmal. Ich bin mitten im Studium in Richtung Webdesign und habe einige Probleme, als CSS-Frischling... ich hoffe, Ihr werdet mir behilflich sein, denn meine Aufgabe lautet (gekürzt und auf den Punkt gebracht):

"Erstelle einen 3-Spalten-Layout. Er soll zentriert sein. Linke Spalte positioniere mit float, rechte ebenso. Die mittige Spalte positioniere
mit margin, wobei - der margin soll breiter sein als Spalten von Links und Rechts. Jetzt brauchst du keinen float für mittige Spalte. "


Was ist denn so problematisch?
Ich kriege diese 3 Spalten nicht nebeneinander, wenn es float, margin, float gibt - die rechte Spalte verschwindet unter. Mit 3x float ist es perfekt, jedoch das ist nicht die Aufgabebedienung.

Meine Frage:
Was kann ich mit der letzter Spalte tun, damit alle nebeneinander sind, **ohne** float und position bei mittige Spalte zu benutzen?

Ich komm nicht darauf hin und lasse mich von Euren Tipps retten Thx
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.12.2013, 18:30
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Ohne floaten geht das nur, wenn die mittlere im DOM nach den beiden anderen kommt Edit fiddle - JSFiddle ist m.E.n. aber nicht sehr schick...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.12.2013, 18:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

ohne die volle Aufgabenstellung kann ich dir nur eine allgemeine Lösung anbieten:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>3 Spalten</title>
   <meta name="description" content="3 Spalten nebeneinander">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      div{
         height: 300px;
      }
      div.floatlinks{
         width: 33%;
         background-color: yellow;
         float: left;
      }
      div.floatrechts{
         width: 33%;
         background-color: green;
         float: right;
      }
      div.margin{
         width: 34%;
         background-color: red;
         margin: 5% 33%;
      }
   </style>
</head>
<body>
   <main role="main">
      <div class="floatlinks">
         <p>floatlinks</p>
      </div>
      <div class="floatrechts">
         <p>floatrechts</p>
      </div>
      <div class="margin">
         <p>margin</p>
      </div>
   </main>
</body>
</html>
Das float muss natürlich noch gecleart werden. Das habe ich jetzt weggelassen.

Gruss

MrMurphy

Geändert von MrMurphy (23.12.2013 um 18:36 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.12.2013, 18:41
Benutzerbild von Lisiah
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Ort: Hessen
Beiträge: 5
Lisiah befindet sich auf einem aufstrebenden Ast
Standard

Ich kann den Code gerne per PN senden, wenn jemand es möchte...
Mit Zitat antworten
  #5 (permalink)  
Alt 23.12.2013, 18:46
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Lisiah Beitrag anzeigen
Ich kann den Code gerne per PN senden, wenn jemand es möchte...
Code per PN wird dir hier keiner abnehmen. Poste ihn hier rein. Es sollen ja auch andere mit ähnlichen oder den gleichen Problemen von der Hilfe profitieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 23.12.2013, 19:01
Benutzerbild von Lisiah
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Ort: Hessen
Beiträge: 5
Lisiah befindet sich auf einem aufstrebenden Ast
Standard

Na dann... HTML und CSS... es geht darum, div info (rechte Spalte) neben div inhalt (mittige) zu platzieren.

HTML-Code:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Dreispaltiges Layout</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	
	<nav id="navigation">
		<ul>
			<li><a href="#" >Produkte</a></li>
			<li><a href="#" >Service</a></li>
			<li><a href="#" >Kontakt</a></li>
			<li><a href="#" >Profil</a></li>
			<li><a href="#" >Home</a></li>
		</ul>
	</nav>
	
	<div id="inhalt">
		<h2>Wilkommen auf unserer Website</h2>
		<h2>Hier präsentieren wir ein 3-spaltiges Layout</h2>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
			tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
	</div>
	
	
	<div id="info">
		<div class="box">
			<h2>Info-Box 1</h2>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
		</div>
		
		<div class="box">
			<h2>Info-Box 2</h2>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
		</div>
		
		<div class="box">
			<h2>Info-Box 3</h2>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
		</div>
	</div>
</html>
Code:
body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	margin: 0 auto;
	margin-top: 20px;
	width: 900px;
	
}

/* Spalte Links, Navigation */

#navigation {
	float: left;
	border: 1px;
	border-style: solid;
	width: 170px;
	height: 200px;
	background-color: #666666;
	
}

/* Navigation reset */

#navigation ul,
#navigation li,
#navigation a {
	margin: 0;
	padding: 0;
	border: none;
	font-weight: bold;
	color: black;
	font-size: 13px;
	text-decoration: none;
}

#navigation ul {
}

#navigation li {
	list-style: none;
	padding: 2px;
	margin-bottom: 12px;
	background-color: #cccccc;
	text-align: left;

}
	
/* Spalte Mitte, Inhalt */
/*  wenn inhalt keinen float hat, will #info nicht neben #inhalt stehen */

#inhalt {
	border: 1px;
	border-style: solid;
	width: 500px;
	height: 800px;
	margin-right: 190x; 
	margin-left: 190px;
	padding: 3px;
}


/* Spalte rechts, Boxen gesamt */

#info {
	float: right; 
	width: 170px;
}

/* Boxen einzeln*/

.box {
	border: 1px;
	border-style: solid;
	height: auto;
}
Mit Zitat antworten
  #7 (permalink)  
Alt 23.12.2013, 19:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

irgendwie fehlt mir im html-Quelltext das body-Element.

Gruss

MrMurphy
Mit Zitat antworten
  #8 (permalink)  
Alt 23.12.2013, 19:13
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Dir wurde doch schon gesagt und auch anhand von 2 Beispielen aufgezeigt wie es umzusetzen ist.

Im Html MUSS dein Div info vor dem Div inhalt kommen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 23.12.2013, 19:15
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zuerst mal - warum hat dein HTML keinen body?

Und dann vielleicht nochmal die komplette Fragestellung. Weil, wie oben schon geschrieben, geht das nur, wenn der mittlere nach den beiden äußeren folgt, oder aber mit einem Hilfs-div. Aber dafür müsste man die genaue Fragestellung kennen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.12.2013, 19:19
Benutzerbild von Lisiah
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Ort: Hessen
Beiträge: 5
Lisiah befindet sich auf einem aufstrebenden Ast
Standard

Ich hatte einen Mausproblem beim mehrfachen Kopieren, originell body ist da wo es sein sollte.

@explanator, okay, das mit Reihenfolge wusste ich nicht. Ich versuch jetzt was damit zu machen, danke.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
float, margin, spalten

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
joomla template wrock CSS 2 06.04.2012 20:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Webseite für Smartphones Optimieren. Cybertronic CSS 8 25.08.2011 12:44
CSS 3 Spalten Layout mit float --> Umbruch verhindern der_die_das CSS 1 27.10.2009 06:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:52 Uhr.