Responsive mit Kompozer

Antworten
camouflage1984
Beiträge: 329
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 https://camouflage1984.de/responsives/ könnt ihr euch es ansehen!

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

weev
Beiträge: 53
Registriert: So 27. Mär 2016, 13:54
Wohnort: Berlin
Kontaktdaten:

Re: Responsive mit Kompozer

Beitrag von weev » Mo 15. Apr 2019, 06:48

Dein link.. Hier... Funktioniert nicht 404

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

Re: Responsive mit Kompozer

Beitrag von camouflage1984 » Mo 15. Apr 2019, 11:58

Hallo weev,

jetzt sollte alles funktionieren.

Danke für den Hinweis
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

Antworten