Beiträge von bloodyball

bloodyball · 19. August 2018

Hallo,

auf meiner Seite http://mein-urheberrecht.de/bibliothek.html sind eine Reihe Divs gefloatet (Mit Symbolen und Links zu den entsprechenden Beiträgen in der Mitte). Ich wollte ein responsives Design schaffen, sodass die Divs sich der Fensterbreite des Browsers entsprechend anordnen. Leider klappt das nicht, ab der zweiten Zeile gibt es Probleme, z.B. gibt es dort nur ein Div in der ganzen Zeile und die nachfolgenden rutschen in die nächste Zeile.

Code

<div class="contentbibliothek">

    <div>
    <a href="bibliothek_bilder.html">
    <p>
    <img src="IMG/pinsel_stift.png" width="100px" alt="Freie Bilder" title="Stockfotos und andere Vorlagen f&uuml;r Dein Projekt" />
    </p>
    <p>Freie Bilder und Fotos im Netz</p>
    </a>
    </div> 
    
    <div>
    <a href="bibliothek_musik.html">
    <p>
    <img src="IMG/wave.png" width="100px" alt="Freie Musik" title="Musik und Sounds f&uuml;r Dein Projekt" />
    </p>
    <p>Freie Musik im Netz</p>
    </a>
    </div>
    
    <div>
    <a href="bibliothek_video.html">
    <p>
    <img src="IMG/video.png" width="100px" alt="Freie Videos" title="Filme und Videos f&uuml;r Dein Projekt" />
    </p>
    <p>Freie Filme und Videos im Netz</p>
    </a>
    </div>

    <div>
    <a href="bibliothek_texte.html">
    <p>
    <img src="IMG/txt.png" width="100px" alt="Freie Texte" title="Texte f&uuml;r Dein Projekt" />
    </p>
    <p>Freie Texte im Netz</p>
    </a>
    </div>
    
    <div>
    <a href="bibliothek_bsuaw.html">
    <p>
    <img src="IMG/book.png" width="100px" alt="eBook" title="ein eBook von buchschreiben.com" />
    </p>
    <p>Buch schreiben und Autor werden</p>
    </a>
    </div>
    
    <div>
    <a href="bibliothek_kvbk.html">
    <p>
    <img src="IMG/journal.png" width="100px" alt="Vertragsmuster" title="Vertragsmuster" />
    </p>
    <p>Kaufvertrag Bildende Kunst</p>
    </a>
    </div>

    <div>
    <a href="bibliothek_model.html">
    <p>
    <img src="IMG/journal.png" width="100px" alt="Vertragsmuster" title="Vertragsmuster" />
    </p>
    <p>Model Release Vertrag</p>
    </a>
    </div>
    
    <div>
    <a href="weblinks.html">
    <p>
    <img src="IMG/web.png" width="100px" alt="Weblinks" title="weiterführende Links zum Thema Urheberrecht" />
    </p>
    <p>Weblinks</p>
    </a>
    </div>

     <div style="clear: both;"></div>

</div>

Alles anzeigen

Code

.contentbibliothek       {
                        position: relative;
                        top:4em;
                        left:25em;
                        width:60%;max-width:45em; 
                        text-align: center;
                        min-height: 800px;
                        color: #FFF;
                        font: 1.2em Book Antiqua, Palatino, serif;
                        text-shadow: 0.1em 0.1em 1px #000; 
                        }
                        
                        
                        
.contentbibliothek div    {
                        float: left;
                        width: 110px;
                        margin: 2em;
                    
}  


.contentbibliothek div a   {
                        color: #FFF; 
}

Alles anzeigen

Das Problem tauch bei mir immer wieder auf, hab mir schon verschiedene Tutorials zu float und clear angesehen, aber irgendwie klappt es bei mir nicht.

Was mach ich falsch ?

bloodyball · 18. Mai 2016

Vielen Dank, insbesondere an JR Cologne und Seepferdchen, eure beiden Hinweise haben das Problem gelöst. Ich hatte schon vermutet, dass es mit der Positionierung zu tun hat, da ich viel damit gestylt habe. Vergebt mir meine Sünden

bloodyball · 17. Mai 2016

Ich würde heutzutage auch den <main> tag bevorzugen. Die Seite begann ich aufzubauen, als tags wie <main> und <article> noch nícht verwendet wurden. Die Verwendung von <div id="wtf"> ist damit nicht inkorrekt, sondern allenfalls nicht mehr zeitgemäß. Jedenfalls hat es mit dem Problem nichts zu tun, und wenn doch, so kann ich aus den Antworten nicht entnehmen, wo konkret der Fehler ist. Allgemeine Hinweise auf den Aufbau der Seite helfen mir nicht weiter und ich habe auch keine Lust, die Seite mit allen Unterseiten zu überarbeiten, nur um die aktuellsten Tags zu verwenden, wenn es technisch gesehen mit den <div> Tags genauso gut funzt.

Mein Anliegen: Ich möchte den Footer am Ende der Seite, nach dem Contentbereich. Deshalb bitte nur Beiträge, die zur Problemlösung beitragen.

bloodyball · 17. Mai 2016

Oh ja, die Positionierung des Footers ... ich habe es innerhalb und außerhalb des "Corpus" (Wrapper) probiert, nachdem es nicht klappen wollte, das Ergebnis war immer das gleiche. Also daran krankt es nicht, hab den Footer jetzt wieder in den "Corpus" gesteckt, aber der Contentbereich wird dennoch vom Footer überlagert.

bloodyball · 16. Mai 2016

Hallöchen alle zusammen,

ich versuche meine Footer am unteren Ende meiner Seite zu positionieren, und habe dazu natürlich auch schon diverse Tutorials konsultiert aber trotz allem will er (der Footer) nicht und legt sich einfach mal quer über den Content der Seite. Warum weiß ich nicht und ich deshalb hoffe ich auf eure Hilfe. Mein gescheiterter Versuch ist hier abrufbar: www.mein-urheberrecht.de/sandbox/index.html bzw. www.mein-urheberrecht.de/sandbox/style.css

Da der CSS-Code sehr lang ist und ich nicht weiß, wo der eigentliche Fehler liegt, belasse ich es bei den Links.

LG

Ringo

bloodyball · 20. Juni 2015

Hey vielen Dank für Die schnelle Hilfe - Jetzt ist es schick !

bloodyball · 19. Juni 2015

Guten Abend,

Ich kann es nicht verstehen, eigentlich sollen die beiden Elemente bei schmalem Fenster untereinander stehen, so habe ich es jedenfalls in einem Tutorial gelernt. Hat in einem Testversuch auch ganz normal funktioniert, nur bei meinem Projekt nicht:

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->




  <title></title>
  <link rel="stylesheet" href="all_style.css" type="text/css">




</head>




<body>




  <main>




   <aside>
	<h2>Empfehlung</h2>
	<ul>
  	<li>Prozesskostenrechner</li>
  	<li>aktuelle Rechtsprechung</li>
  	<li>Streitschlichtung</li>
	</ul>
   </aside>




   <article>




	<div><h1>Philosophie</h1>
	<p><img style="float: left; margin-right: 9px;" src="http://a1.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NDg0MDU1MDEwMjQ4MjA3.jpg" border="" height="100px" width="100px" alt="Thomas Jefferson" /><em>"Wenn die Natur ein Ding am wenigsten tauglich f&uuml;r alleiniges Eigentum gemacht hat, so ist das die denkende Kraft, die man "Idee" nennt, die ein Individuum nur solange alleinig besitzt, solange es sie f&uuml;r sich beh&auml;lt; aber in dem Moment, in dem sie ausgeplaudert wird, bringt sie sich selbst in den Besitz eines jeden ... Ebenso ist es ihr eigent&uuml;mlich, dass niemand weniger besitzt, denn jeder besitzt sie als ganzes ... so wie der, der seine Fackel an meiner entz&uuml;ndet, das Licht empf&auml;ngt, ohne mich ins Dunkel zu st&uuml;rzen. Dass sich Ideen frei vom einem zum anderen &uuml;ber den Erdball verbreiten sollen, zur moralischen und gegenseitigen Anleitung des Menschen, und der Verbesserung seiner Lebensumst&auml;nde, scheint einzigartig und g&uuml;tig von der Natur eingerichtet worden zu sein. ... Erfindungen k&ouml;nnen also, ihrer Natur nach, kein besitzbares Gut sein."</em> Thomas Jefferson in einem Brief an Isaac McPherson</p>
	</div>




   </article>




  </main>




</body>
</html>

Alles anzeigen

Code

body               	{background-color:#FFF;
                    	border:0;
                    	text-align: center;
                    	margin: 0;
                    	}




img                 	{border:0;}




div                	{border:0 transparent none;margin:0}




a                  	{border:0 transparent none;text-decoration:none;color:white;}
a:hover            	{text-decoration:none;color:#FFD08C;}
a:focus            	{outline: none;}







article             	{
                    	width: 44em;
                    	}










aside               	{
                    	font: 1.2em georgia;
                    	color: #FFFF00;
                    	float: right;
                    	}




aside ul            	{
                    	list-style: none;
                    	}

Alles anzeigen

Was habe ich falsch gemacht?

Beiträge von bloodyball

Float / clear

Footer unten ausrichten

Footer unten ausrichten

Footer unten ausrichten

Footer unten ausrichten

Gefoatete DIVs bzw. ARTICLE und ASIDE laufen beim Verkleinern des Fensters ineinander anstatt untereinander

Gefoatete DIVs bzw. ARTICLE und ASIDE laufen beim Verkleinern des Fensters ineinander anstatt untereinander