Responsive mit Kompozer

Antworten
camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Responsive mit Kompozer

Beitrag von camouflage1984 » So 24. Jan 2016, 03:49

Ich habe hier ein Tut um mit Kompozer ein "Responsives" Design zu erstellen,
Responsive in Klammern weil es nicht wirklich im engsten Sinne Responsive ist, aber es sich jeder Größe anpasst!
Habe den Slider von diesem Tut: viewtopic.php?f=12&p=806#p806 in die Seite eingebunden!
Hier der Quellcode:

Code: Alles auswählen


<!-- alles -->
<div id="alles">
<!-- kopf -->
<div id="kopf">
<h1>Responsive mit Kompozer</h1>
<div id="slider-box">
<ul class="bxslider">
  <li><img src="jquery.bxslider/images/code.jpg" alt="slide1" /></li>
  <li><img src="jquery.bxslider/images/tastatur.jpg" alt="slide2" /></li>
  <li><img src="jquery.bxslider/images/seo.jpg" alt="slide3" /></li>
</ul>
</div>
</div>
<!-- ende kopf -->
<!-- navigation -->
<div id="navigation">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Der Weg zu Uns</a></li>
<li><a href="#">Öffnungszeiten</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
<!-- ende navigation -->
<!-- inhalt -->
<div id="inhalt">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>
<!-- ende inhalt -->
<!-- unten -->
<div id="unten">
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam
</div>
<!-- ende unten -->
</div>
<!-- ende alles -->

 
Hier die css dazu:

Code: Alles auswählen

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans',sans-serif;
}
a {
  outline-style: none;
  text-decoration: none;
  outline-color: invert;
  outline-width: medium;
  color: #111111;
}
ul {
  list-style-type: none;
}
a:hover {
  color: #ffffff;
}
h1 {
  font-family: 'Roboto Condensed',sans-serif;
  font-size: 200%;
  font-weight: normal;
}
#alles {
  margin: 0 auto;
  background: #fafafa none repeat scroll 0%;
  width: 80%;
  max-width: 1000px;
}
#navigation {
  padding: 1%;
  float: left;
  width: 98%;
  background-color: #cccccc;
}
#navigation li {
  border-right: 1px solid #bbbbbb;
  padding: 0.5em;
  float: left;
  margin-right: 0.5em;
}
#navigation li:last-child {
  margin-right: 0;
}
#inhalt {
  padding: 0.8em 0;
  float: left;
  width: 100%;
}
#unten {
  padding: 0.8em 1%;
  float: left;
  background-color: #666666;
  width: 98%;
}

 
Zur Erklärung:

Über die id alles wird die Breite der Seite eingestellt!
Ich habe dort angegeben das diese Zentriert ist und 80% des Bildschirms einnehmen kann, gleichzeitig aber die maximal Breite der Seite auf 1000px begrenzt damit die Seite auf großen Bildschirmen nur 1000px breit ist!
Das war auch schon fast das größte Geheimnis an diesem "Responsive" Design ;)
Danach wird im div alles nach Links ausgerichtet und die Breite der div`s in % angegeben, das padding links und rechts muss auch in % angegeben werden.


Hier http://camouflage1984.de/responsives/ könnt ihr euch es ansehen!

Die zip Datei mit css html und slider:
responsives.zip
(198.73 KiB) 12-mal heruntergeladen
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast