zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV Box (Sidebar) in bereits fertiges Design einfügen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.06.2011, 15:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2011
Beiträge: 5
Daniel386 befindet sich auf einem aufstrebenden Ast
Frage DIV Box (Sidebar) in bereits fertiges Design einfügen?

Hey!
Ich habe mir ein Design mit CSS gecodet, jetzt ist es fertig, aber ich möchte gerne noch in das fertige Design eine Sidebar (rechts) einfügen, also eine "DIV Box".
Jetzt habe ich aber das Problem, dass ich nicht weiß, wohin ich die "Div Anweisung" (<div id="sidebar"></div>) in die HTML Datei positionieren soll.
Wenn ich sie nach dem Content schreibe, dann positioniert sich die Sidebar im Content.

Lg
Daniel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.06.2011, 16:29
Benutzerbild von jnv
jnv jnv ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.07.2010
Beiträge: 152
jnv befindet sich auf einem aufstrebenden Ast
Standard

Ohne deinen Quellcode zu kennen, ist es unheimlich schwer dir zu helfen.
__________________
#m { f : g } /* jnv */
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.06.2011, 16:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2011
Beiträge: 5
Daniel386 befindet sich auf einem aufstrebenden Ast
Standard

Entschuldige


HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design und Website by Daniel Sacharov.
Copyright 2011 Daniel Sacharov.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Daniel Sacharov .:. Grafik- und Webdesign</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="header"></div>
	<div id="menu">
		<ul>
			<li><a href="#">Startseite</a></li>
			<li><a href="#">Über uns</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Impressum</a></li>
		</ul>
	</div>
<div id="wrapper">
<div class="btm">
<div id="kontaktformular"></div>

	<div id="page">
		<div id="content">
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
        TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
        TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
		TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
        </div>
		
		
		
		
		

	
	<div id="footer">
	<p>Copyright 2011 Daniel Sacharov.</p>
	</div>
	
	<div id ="boxen">
    <div class ="boxformatierung">
    Startseite <br />
	Über uns <br />
	Impressum <br />
    </div>
    <div class ="boxformatierung">
    2. Box <br />
    LINK <br />
    LINK <br />
 	</div>

	<div class ="boxformatierung">
    3. Box <br />
    LINK <br />
    LINK <br />
 	</div>
	<div class ="boxformatierung">
    4. Box<br />
    LINK <br />
    LINK <br />
 	</div>
	<div class ="boxformatierung">
    5. Box <br />
    LINK <br />
    LINK <br />
 	</div>
	</body>

</html>




CSS:
Code:
/*
Design by Daniel Sacharov.
Copyright 2011 Daniel Sacharov.
*/

body {
	margin: 0px 300px 0px -90px;
	background: #00baff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #444444;
}

h1, h2, h3 {
	margin: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #444444;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	border-bottom: 1px dotted #CC0001;
	color: #FB7600;
}

a:hover {
	background: none;
}


/* Header */

#header {
	width: 900px;
	height: 200px;
	margin: 20px 0px 0px 180px;
	
	background: url(images/header.png) no-repeat left top;
}


/* Menu */

#menu {
	width: 900px;
	height: 50px;
	background: url(images/navi.png) no-repeat left top;
	margin: 0px 0px 0px 180px;
	
}

#menu ul {
	margin: 0;
	padding: 13px 0 0 20px;
	list-style: none;
	line-height: normal;
	
}

#menu li {
	float: left;
	border-right:1px dashed #aeaeae;
}

#menu a {
	display: block;
	margin-right: 3px;
	padding: 5px 20px 7px 20px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #333333;
	border: none;
}

#menu a:hover {
	color:#00baff;
    	
}


#content {
	height:auto;
	width:910px;
	padding-left:15px;
	padding-right:15px;
	background:url(images/content.png) repeat-y;
	margin: 0px 185px 0px 175px ;
	
	}


#footer {
	width: 900px;
	height: 60px;
	background-image: url(images/footer.png) ;
	margin: 0px 5px 0px 180px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

#footer p {
	margin: 0;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	padding: 20px 80px 0px 0px;
}

#footer a {
	color: #FFFFFF;
	border-bottom: 1px #FFFFFF dotted;
}


#boxen {
background-image: url(images/footer_box.png);
width: 874px;
height: 120px;
margin: 0px 0px 0px 193px;
}


.boxformatierung {
float: left;
width: 150px;
padding: 5px 0px 0px 20px;
}


#sidebar {
background-image: url(images/sidebar.png);
width: 300px;
height: 500px;
float: right;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 18.06.2011, 17:35
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

In deinem html gibts keine #sidebar ??
Zudem mehrere Fehler, 3 divs werden nicht geschlossen.
Stell das mal online, wenn du es korrigiert hast.

btw: copyright auf css?? Netter Gag.

Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 18.06.2011, 21:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2011
Beiträge: 5
Daniel386 befindet sich auf einem aufstrebenden Ast
Standard

Ja, die Sidebar in der HTML Datei habe ich ja nicht eingetragen, da ich wissen wollte, wo, da ich es jedes mal nicht hinbekomme...
Die 3 Divs ohne Endungen sind weg, aber die waren eh unwichtig, da habe ich nur was getestet.

CSS mit Copyright? Wieso Geg?
Mit Zitat antworten
  #6 (permalink)  
Alt 19.06.2011, 10:10
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

I.d.R. würde man die #sidebar hinter #content platzieren.
Beides floatet, beide Breiten zusammen ergeben die Gesamtbreite.
Danach clearen.
Ein Beispiel (von vielen):
Two Column Fixed Width ~ Non-Equal Columns

Deinem Code nach vermute ich mal, du hast keine bzw. wenig Erfahrung?
Basis Knowhow:
LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Manfred
Mit Zitat antworten
  #7 (permalink)  
Alt 19.06.2011, 14:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2011
Beiträge: 5
Daniel386 befindet sich auf einem aufstrebenden Ast
Standard

Wieso sollte ich denn wenig Erfahrung haben? Ich habe es mittlerweile schon hinbekommen...
Mit Zitat antworten
  #8 (permalink)  
Alt 19.06.2011, 14:36
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von Daniel386 Beitrag anzeigen
Wieso sollte ich denn wenig Erfahrung haben? Ich habe es mittlerweile schon hinbekommen...
Wegen unsematischem Code z.B.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #9 (permalink)  
Alt 21.06.2011, 19:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2011
Beiträge: 5
Daniel386 befindet sich auf einem aufstrebenden Ast
Standard

Was ist denn da "unsystematisch"?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.06.2011, 21:02
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Thielo redet von Semantik...

Hmm, du solltest wirklich zumindest mal Little Boxes durcharbeiten.
Dann verstehst du die Begriffe.

Z.B. sowas hier macht auch ziemlich wenig Sinn:
Code:
body {
	margin: 0px 300px 0px -90px;
   ...
Manfred
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, div box, sidebar

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
Fixes Div bei zentriertem Design hausl78 CSS 0 28.10.2010 11:12
bekomme div box design einfach nett hin. GateKay CSS 8 27.02.2005 13:46
css box design in header und footer trennen GateKay CSS 1 08.01.2005 14:54
Div Box will absolut positionierte Box nicht mitumrahmen Zwacky CSS 1 17.12.2004 07:09
div box breite nach inhalt! MikeDe CSS 2 03.12.2004 05:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:26 Uhr.