zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Weiteres DIV neben dem Logo DIV will einfach nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.01.2015, 12:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2015
Beiträge: 6
Rasmusen befindet sich auf einem aufstrebenden Ast
Standard Weiteres DIV neben dem Logo DIV will einfach nicht

HI, mein erster Beitrag hier weil ich total verzweifle. Ich möchte oben neben meinem linksbündigen Webseitenlogo ein weiteres Div haben welches Rechtsbündig ist. Für Login und Registrierung.
Nur leider bekomme ich das einfach nicht hin. Jedes mal verschiebt dann die Box die Logo Box nach unten. float:left ; hat nichts gebracht. Ich weis nicht mehr weiter. Bitte helft mir .

Hier der HTML Code ohne die rechte Loginbox:
Code:
<body>
<div id="webseite">
		<div id="header">
			<div id="logo">
			<img src="images/webseitenlogo.jpg" alt="Best Vote">Testseite.com
			</div>
			<div id="menu">
			<a href="#">HOME</a><a href="#">HERSTELLER</a><a href="#">PARFUMS</a><a href="#">CHARTS</a><a href="#">FORUM</a><a href="#">REVIEWS</a><a href="#">NEWS</a>
			</div>
		</div>
 <div id="main">
		<div id="topsite">
				<div id="contenttop">
				Teste den Text
				</div>
				<div id="contentup">
				Teste den Text
				</div>
				<div class="box_blau"> 
<div class="box_blau_headline"><box_blau_headline_format>Überschrift</box_blau_headline_format></div>
<div class="headline">
             Lorem ipsum dolor sit amet, ...
        </div>
<div class="article">
            <img src="images/test.jpg" alt="Vote" width="30%" align="left" border="2"> Lorem ipsum dolor sit amet, ...
        </div>

</div>
<div class="box_blau"> 
<div class="box_blau_headline"><box_blau_headline_format>Überschrift</box_blau_headline_format></div>
Text Hauptbereich
</div>
<div class="box_blau"> 
<div class="box_blau_headline"><box_blau_headline_format>Überschrift</box_blau_headline_format></div>
Text Hauptbereich
</div>
	</div>
<div id="footer">
</div>
</div>
Nun der dazugehörige CSS Code :
Code:
body {
background-color:#AC93A2;
text-align:center;
margin:0 auto;
}
#webseite {
background-color:#FAFAFA;
width:980px;
height:900px;
margin:0 auto;
border-style:solid;
border-width:1px 1px 0px;
border-color: #2C1924;
border-radius: 6px 6px 0px 0px;
}
#header {
width:980px;
}
#logo {
width:580px;
height:70px;
font-size: 30px;
font-family: 'StationMedium'; 
font-weight: normal; 
font-style: normal;
color:#693754;
text-align:left;
margin-left:40px;
margin-TOP:5px;
}
#menu {
width:980px;
height:50px;
background-color:#2C1924;
}
div#menu >a {
font-family: 'NordicaAdvancedRegular'; 
   font-weight: normal; 
   font-style: normal; 
   text-align:middle;
font-size: 17px;
background: #2C1924;
padding: 10px 15px;
color:#FFFFFF;
text-decoration:none;
border-radius: 3px;
}
div#menu >a:hover {
font-family: 'NordicaAdvancedRegular'; 
   font-weight: normal; 
   font-style: normal; 
font-size: 17px;
background: #693754;
padding: 20px 15px;
color:#FFFFFF;
text-decoration:none;
border-radius: 3px;
}
#main {
margin:0 auto;
text-align: center;
width:980px;
height:750px;
display: block;
}
#topsite {
width:978px;
height: 767px;
}
#contenttop {
margin: 10px 10px 10px 10px;
width:958px;
height: 150px;
border-style:solid;
border-width:1px 1px 1px;
border-color: #834547;
border-radius: 6px 6px 6px 6px;
}
#contentup {
margin: 10px 10px 10px 10px;
width:958px;
height: 250px;
border-style:solid;
border-width:1px 1px 1px;
border-color: #834547;
border-radius: 6px 6px 6px 6px;
}
.box_blau {
margin-left: 5px;
float:left ;
width:319px;
height:300px;
border-color:#834547;
border-style:solid;
border-width:0px 1px 1px 1px;
font-size:12px;
border-radius: 5px 5px 5px 5px;
}
.box_blau_headline {
width:319px;
background:#2C1924;
margin-top: -5px;
margin-bottom: 10px;
border-radius: 5px 5px 0px 0px;
}
box_blau_headline_format {
width:319px;
color:white;
font-family: 'NordicaAdvancedRegular'; 
   font-weight: normal; 
   font-style: normal; 
   text-align:middle;
font-size: 16px;
line-height:normal;
margin:0px;
padding:2px 7px 2px 2px;
}
#footer {
width:980px;
height:15px;
margin-top:-15px;
margin-left:-1px;
background-color:#2C1924;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color: #693754;
border-radius: 0px 0px 6px 6px;
}
.headline {
font-family: 'NordicaAdvancedRegular'; 
   font-weight: normal; 
   font-style: normal; 
   text-align:middle;
font-size: 14px;
        padding: 1px;          
        background:white;
     }
.article {
font-family: 'NordicaAdvancedRegular'; 
   font-weight: normal; 
   font-style: normal; 
   text-align:middle;
font-size: 12px;
        padding: 3px;          
        background:white;
     }
/* floats */
     .flt-left { float: left; }
     .flt-right { float: right; }
     .flt-clear{ clear: both; }
Ich muss dazu sagen das ich CSS erst noch lerne und vieleicht nicht alles wirklich richtig gemacht habe. Ich freue mich auf jeden Fall wenn Ihr mir Tips gebt und mir auch sagt wo ich Mist gebaut hab.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.01.2015, 12:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Erst mal: Ja du lernst noch, aber du solltest dir dringendst diese div-suppe abgewöhnen. Setze divs nur ein, wo es unbedingt notwendig ist. Verwende sprechende Elemente (Du kannst JEDES Element so stylen wie du willst). Ein div hat keine Bedeutung, es ist einfach nur ein container. Ein Paragraph (p) oder Überschrift (h1-h6), Listen (ul, ol) haben sehr wohl eine Bedeutung und helfen dir die Seite zu strukturieren.


Zu deinem Problem:
Du brauchst (wie oben schon geschrieben) kein div um dein Logo und um deine "Navigation". Navigation in Anführungszeichen, weil eine Navigation ist eigentlich eine Aufzählung von Links und eine Aufzählung ist eine Liste, welche dir aber fehlt. Hier mal ein sauberer Aufbau für Logo, Navigation (Dein KOMPLETTER Code gehört überarbeitet... und nicht, wenn du dann fertig bist, weil das kann man dann nicht mehr machen)

Code:
<img src="logo.gif" alt="LOGO">
<nav> <!-- Beachte hier die semantische Verwendung eines nav(igation)-Tags, welcher eine Navigation kennzeichnet -->
<ul>
  <li><a ...>Link 1 </a> </li>
  <li><a ...>Link 2 </a> </li>
</ul>
</nav>


nav, img{float:left}
Das sind mal die Grundlagen. Verzichte auch auf fixe Breiten und Höhenangaben (entweder in der Breite ODER in der Höhe begrenzen), HTML Elemente haben die Eigenschaft, dass sie sich automatisch dem Inhalt anpassen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2015, 13:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2015
Beiträge: 6
Rasmusen befindet sich auf einem aufstrebenden Ast
Standard

Oh, das schockt mich jetzt ein wenig weil ich die Seite eigentlich voll schön fand. Ich glaub ich hab hier einiges falsch verstanden im CSS obwohl ich bis grad eben noch dachte das ich es gecheckt habe.
Das mit den Elementen verstehe ich nicht, wie soll ich da ein tolles Menü bauen. Wenn Du eine Seite kennst die das gut erklärt dann poste mir das bitte.

Ich bin schon dankbar das ich jetzt weis das hier einiges schief läuft.
Ich verstehe nur nicht wie ich dann mit Deinem Code dem Seitentitel neben dem Logo eine Schrift aus Openfontlibary zuteilen kann wenn da nicht mal ein Container ist der diesen Abschnitt auch Definiert. Ich müsste dann ja im HTML direkt die Schrift zuweisen vermutlich.

Ich bin jetzt irgendwie noch verzweifelter wie vorher
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2015, 13:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du kannst Container auch verwenden, nur nicht so inflationär wie du es tust. Auch kannst du einem Bild einen Abstand geben. Oder wenn du neben dem Bild noch eine Überschrift haben willst, dann setze dort noch eine Überschrift der entsprechenden Ordnung (h1 zB) und gib dieser Überschrift einen Abstand oder deine Schriftart. Falls es doch eher ein Absatz ist, dann verwendest du das Absatz-Element (p).
Du kannst auch Elementen, die keine divs sind Klassen und IDs vergeben, so kannst du zB <nav id="hauptnavigation"> verwenden und dann im CSS mit #hauptnavigation diese Navigation so stylen wie du willst.

Tutorials für Menüs gibt es wie Sand im Meer, man muss nur google benutzen. Ich verlinke immer dieses hier, weil ich hierfür den Link gut finde und es auch recht verständlich erklärt wird, aber es gibt noch etliche andere.

Btw: Verzweifle nicht, auch ich habe einmal so angefangen wie du. Da muss man oft alles wegschmeißen und neu bauen (Dann dafür aber hoffentlich ohne / mit weniger Fehler ^^ )

Edit: Du brauchst auch nicht "alles wegschmeißen", nur ergänzen und ersetzen. So kannst du statt <div id="footer">
</div> folgendes verwenden: <footer> </footer> und in deinem CSS #footer durch footer ersetzen. Bzw. du verwendest bei <footer id="footer"> dann kannst du weiterhin mit #footer darauf zugreifen.

Auch gibt es das Element <box_blau_headline_format> nicht. Vermeide auch (aber das kannst du als Anfänger noch vernachlässigen) namen wie blaue_headline, roter_button, etc... sondern eher Namen wie info_headline, warning_button. Also Namen, die beschreiben, WAS das Element tut und nicht WIE es ausschaut.

Geändert von cloned (30.01.2015 um 13:12 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 30.01.2015, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2015
Beiträge: 6
Rasmusen befindet sich auf einem aufstrebenden Ast
Standard

Ok , danke für Deine freundliche Reaktion und das Du nicht gleich mich geflamed hast wegen der "Suppe"
Ich hab das jetzt sogar verstanden wie Du das gemeint hast. Ich verstehe aber nicht wie CSS nun wirklich geschreiben wird.

Meine Divs sind mit # andere verwenden einen Punkt und wieder andere gar nichts z.B. box_blau_headline_format {

Dann gibts noch sowas hier div#menu >a { und wer soll da noch durchblicken.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.02.2015, 11:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

CSS hat nichts mit divs zu tun. Ja, du kannst divs stylen, aber du kannst jedes Element stylen. So wie du es möchtest. Gewöhne dir also dringend an, die richtigen Elemente an der richtigen Stelle zu verwenden. Woher weißt du, welches Element das richtige ist? Das erkennt man anhand des Kontextes. Gehört da eine Überschrift hin, dann verwende eine h1 (oder h2, h3, je nach wichtigkeit der Überschrift) Bei einem Paragraphen (Absatz) verwende auch einen solchen: <p> Absatz</p>

Nun zu deinem zweiten Problem: #, . und > sind absolute Grundlagen von CSS. Wenn du das noch nicht verstanden hast, dann versuche erst, dies zu verstehen, bevor du dich an eine Webseite machst.
Kurz zusammengefasst:
div { ... } wirkt auf alle divs.
#rating { ... }wirkt auf das Element (egal ob div, span, h1, p, ...), welches die ID rating besitzt. <p id="rating"> Hier wirkt #rating </p> IDs dürfen nur EINMAL auf einer Seite vorkommen.
.warning sind Klassen und wirken auf alle Elemente, die diese Klasse besitzen. <h1 class="warning">Ich bin eine Warnung </h1> <p class="warning>Ich bin auch eine Warnung</p>
box_blue_headline_format spricht das Element blue_box_headline_format an, welches es aber NICHT gibt und entfernt werden kann. Das kommt wohl nur von falsch geschlossenen Anführungszeichen oder so...

Das hintereinanderschreiben (div#menu a) ist das Grundprinzip von CSS. Das alles hier zu erklären sprengt den Rahmen, also lerne das noch, bevor du dich an eine eigene Seite machst.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.02.2015, 17:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2015
Beiträge: 6
Rasmusen befindet sich auf einem aufstrebenden Ast
Standard

Du solltest mal überlegen ob Du nicht selber ein Buch veröffnetlichst. Scheinbar hast Du da so ein erklärtalent. Also ich mach das jetzt so das ich das nochmal neu Anfange mit der Anleitung aus dem Netz wo Du mir geschrieben hast. Kennst DU ein wirklich gutes Buch wo diese Ordnung auch gut erklärt wird. Das würd ich mir dann auch sofort bestellen. Ich habe auch nicht vor auf zu geben sondern viel mehr will ich es echt so verstehen und begreifen das auch ein Profi sagen würde : OK gut gemacht , geht besser aber gut gemacht. Das wäre mein Ziel für ENDE Februar.
Mit Zitat antworten
  #8 (permalink)  
Alt 02.02.2015, 17:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Hahah danke, vielleicht schreib ich ja wirklich mal ein Buch
little-boxes wird immer gern genannt wenn es um ein gutes Buch für Anfänger geht. Ich habe es selber nicht gelesen, aber ich empfehle es trotzdem mal.

Die erste Version von dem Buch (aus 2009, also nicht mehr ganz aktuell) kann sogar kostenlos gelesen werden. Da solltest du auch mal viele Tipps und Anleitungen finden.
Mit Zitat antworten
  #9 (permalink)  
Alt 02.02.2015, 18:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2015
Beiträge: 6
Rasmusen befindet sich auf einem aufstrebenden Ast
Standard

Super, danke. Hab mir das große Buch mit Video gerade gebraucht bei Ebay gekauft. Jetzt bin ich voller Hoffnung das ich mein Vorhaben bis Ende Februar schaffe. Du darfst dann der jenige sein der meinen Code bewertet.
Mit Zitat antworten
Sponsored Links
Antwort

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
DIV Höhe 100% Daniel86 CSS 12 29.07.2011 13:40
Header entfernen tripple CSS 17 15.06.2010 16:41
div Positionierung bei Browsern Ancient CSS 22 17.03.2005 01:49
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 16:58
Ich bekomme das mit dem CSS einfach nicht hin tkd CSS 6 09.05.2004 21:43


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:49 Uhr.