• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie bekomm ich diese Stylesheets in Responsiv:( und 2 kleine weitere Fragen

L

LisaC

Neues Mitglied
Hey Leute:)
Ich sitze gerade an einer Website für meinen Betrieb und bin langsam am verzweifeln:(
Vielleicht kann mir hier jemand helfen. Die Stylesheets und der Index sind schon fertig und passend so fast.
Jedoch wurde mir gerade gesagt (vor 2 Stunden) ich soll doch bitte die Website in Responsiv noch ändern.
Jetzt meine Frage.
Wie kann ich meine Stylesheets soweit umändern. Ich les schon die ganze Zeit wie das gehen soll aber da ich viel mit Absoluten Positionen gearbeitet habe komm ich einfach nicht durch. Das Layout stellt sich bei mir einfach immer Komplett um.
Könnte mir jemand helfen oder erklären wie ich es umändern muss?
Ich denke die anderen 2 Fragen klären sich sobald die Website sich anpasst :) / ich hoffe /

_____________________________________________________________________________________________________
Stylesheets
______________________________________________________________________________________________________
* {
margin: 0;
padding: 0;
}

.inner {
padding: 10px;
}

.clear {
clear: both;
}

.anpassen {
height: 100%;
width: 100%;
}
#textarea {
resize: none;
}





/*-------------------------------------Startseite--------------------------------------*/

#klicker1 { /*Button Klick Auslöser*/
position: absolute;
height:100%;
width: 100%;
opacity: 0;
}

#container1 { /*Hintergrund Button News*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 25.25%;
height:59%;
width: 12%;
max-width: 50%;
opacity: 0;
}

#container2 { /*Hintergrund Button TV*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 37.75%;
height:59%;
width: 12%;
opacity: 0;
}

#container3 { /*Hintergrund Button Filliale*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 50.25%;
height:59%;
width: 12%;
opacity: 0;
}

#container4 { /*Hintergrund Button Kontakt*/
background: FFFFFF;
position: absolute;
top: 20%;
left: 62.75%;
height:59%;
width: 12%;
opacity: 0;

}

#container5 { /*Außenkante Links*/
background: #f8f8f8;
position: absolute;
top: 14%;
left: 0%;
height:65%;
width: 25.25%;
}

#container6 { /*Außenkante Rechts*/
background: #f8f8f8;
position: absolute;
top: 14%;
left: 74.75%;
height:65%;
width: 25.25%;
}

#container7 { /*Zwischenspalte 1*/
background: #f8f8f8;
position: absolute;
top: 20%;
left: 37.25%;
height:59%;
width: 0.5%;
}

#container8 { /*Zwischenspalte 2*/
background: #f8f8f8;
position: absolute;
top: 20%;
left: 49.75%;
height:59%;
width: 0.5%;

}

#container9 { /*Zwischenspalte 3*/
background: #f8f8f8;
position: absolute;
top: 20%;
left: 62.25%;
height:59%;
width: 0.5%;
}

#container10 { /*Oberkante Header*/
background: white;
position: absolute;
top: 0%;
left: 0%;
height:14%;
width: 100%;
}

#container11 { /*Oberkante Body*/
background: #f8f8f8;
position: absolute;
top: 14%;
left: 25.25%;
height:6%;
width: 49.5%;
}

#container12 { /*Unterkante*/
background: white;
position: absolute;
top: 79%;
left: 0%;
height:21%;
width: 100%;
text-align: center;
font-size: 85%;
color: #848079;
font-family: 'Times New Roman';

}

#container13 { /*Button News*/
position: absolute;
top: 61%;
left: 25.25%;
height:8%;
width: 12%;

}

#container14 { /*Button TV*/
position: absolute;
top: 61%;
left: 37.75%;
height:8%;
width: 12%;

}

#container15 { /*Button Filliale*/
position: absolute;
top: 61%;
left: 50.25%;
height:8%;
width: 12%;
}

#container16 { /*Button Kontakt*/
position: absolute;
top: 61%;
left: 62.75%;
height:8%;
width: 12%;

}

#container17 { /*Hintergrund*/
position: absolute;
top: 20%;
left: 25.25%;
height: 59%;
width: 49.5%;
}

#container18 { /*Logo*/
position: absolute;
top: 1%;
left: 22.5%;
height: 12%;
width: 12%;
}

#container19 { /*Überschrift*/
position: absolute;
top: 2.5%;
left: 0%;
height: 10%;
width:100%;
text-align:center;
font-size: 400%;
color: black;
font-family: 'impact';
}

#container20 { /*Logo Facebook*/
position: absolute;
top: 81%;
left: 67.6%;
height: 5%;
width: 2.5%;
}

#container21 { /*Logo Twitter*/
position: absolute;
top: 81%;
left: 70.1%;
height: 5.2%;
width: 2.47%;
}

#container22 { /*Logo Twitter*/
position: absolute;
top: 81%;
left: 72.5%;
height: 5.26%;
width: 2.47%;
}


_____________________________________________________________________________________________________
Html
_____________________________________________________________________________________________________

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">

<div id="container5">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Außenkante -->

<div id="container18">
<img class="anpassen" border="0" src="Bilder/Logo.jpg">
</div> <!-- Logo-->


<div id="container19">
<div class="inner">
<span>Titel unserer Website</span>
</div> <!-- .inner -->
</div> <!-- Überschrift-->


<!-- Die Button Namen sind aktuell als Bild drin weil diese sich nicht fixieren liesen -->

</head>

<body>


<div id="container17">
<img class="anpassen" border="0" src="Bilder/Startseite.jpg">
</div> <!-- Hintergrund-->


<div id="container11">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Oberkante Body-->


<div id="container5">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Außenkante -->


<div id="container13">
<img class="anpassen" border="0" src="Bilder/Logo-News.png">
</div> <!-- Button Rahmen News-->


<div id="container1">
<h1>
<a id="klicker1" href="News.htm">
</a>
</h1>
</div> <!-- News Button -->


<div id="container7">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Zwischenspalte -->


<div id="container14">
<img class="anpassen" border="0" src="Bilder/Logo-TV.png">
</div> <!-- Button Rahmen TV-->


<div id="container2">
<h1>
<a id="klicker1" href="TV.htm">
</a>
</h1>
</div> <!-- TV Button -->



<div id="container8">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Zwischenspalte -->


<div id="container15">
<img class="anpassen" border="0" src="Bilder/Logo-Filliale.png">
</div> <!-- Button Rahmen Filliale-->


<div id="container3">
<h1>
<a id="klicker1" href="Filliale.htm">
</a>
</h1>
</div> <!-- Filliale Button-->


<div id="container9">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Zwischenspalte -->


<div id="container16">
<img class="anpassen" border="0" src="Bilder/Logo-Kontakt.png">
</div> <!-- Button Rahmen Kontakt-->


<div id="container4">
<h1>
<a id="klicker1" href="Kontakt.htm">
</a>
</h1>
</div> <!-- Kontakt Button-->


<div id="container6">
<div class="inner">
</div> <!-- .inner -->
</div> <!-- Außenkante-->


<div id="container12">
<div class="inner">
<span>
<br>Brabel
<br>Brabel
<br>Adressen und so
</span>
</div> <!-- .inner -->
</div> <!-- Unterkante-->

<div id="container20">
<img class="anpassen" border="0" src="Bilder/Logo-Facebook.ico">
</div> <!-- Facebook Button Icon-->


<div id="container20">
<a id="klicker1" href="Link Blub Brabel">
</a>
</div> <!-- Facebook Button Link-->


<div id="container21">
<img class="anpassen" border="0" src="Bilder/Logo-Twitter.ico">
</div> <!-- Twitter Button Icon-->


<div id="container21">
<a id="klicker1" href="Link Blub Brabel">
</a>
</div> <!-- Twitter Button Link-->


<div id="container22">
<img class="anpassen" border="0" src="Bilder/Logo-YouTube.ico">
</div> <!-- Twitter Button Icon-->


<div id="container22">
<a id="klicker1" href="Link Blub Brabel">
</a>
</div> <!-- Twitter Button Link--

</body>
</html>
 
Schon mal thx :)
Ok wird also einiges an Arbeit

Seh ich das gerade falsch oder reicht es die Bootstrap, Quelle und Sass zu downloaden?^^
 
Tronjer schrieb:
Es reicht sogar, die Links aus dem Bootstrap CDN im Head einzubinden.
Zum Vergrößern anklicken....
Zum einen soll man zumindest die Bootstrap JS Erweiterungen im Footer einbinden, zum anderen hat das Verlinken Vor- und Nachteile. Ich finde, die Nachteile überwiegen und verwende daher Kopien:

Vorteil: Wenn alle Verlinken, dann ist die Chance groß, dass ein Besucher der eigenen Seite schon wo anders war, wo verlinkt wurde, und die Datei ist schon im Cache, der Download entfällt.

Nachteile:
  • Ist die verlinkte Seite nicht verfügbar, dann ist meine Seite völlig unansehnlich (unbrauchbar)
  • Man kann die CSS nicht modifizieren, man muss die Definitionen mit eigenen CSS überschreiben
  • Ich habe schon oft genug erlebt, dass kostenlose Dienste von heute auf morgen den Dienst einstellen
 
Tronjer schrieb:
Wenn du in der boostrap.css herumpfuschst, hast du etwas grundlegend nicht verstanden.
Zum Vergrößern anklicken....
Naja, man muss ja nicht pfuschen, sondern kann sich seine eigene CSS erstellen lassen, das ist eine offiziell vorgeschlagene Vorgehensweise und die ist dann halt lokal bereitzustellen. Es ging hier in erster Linie um den die Änderung und nicht das WIE.
LeCub schrieb:
Ich glaube eher nicht, dass ... von heute auf morgen ihren Dienst einstellt
Zum Vergrößern anklicken....
Glaube ich auch nicht, meist werden Firmen aufgekauft und der Nachfolger ändert dann Namen, Links, Nutzungsbedingungen ... Egal wie, das kann jeder halten, wie er will, ich bin halt eher konservativ und will meine Dokumente und meine Textverarbeitung lokal und nicht in der Cloud, und ich will meine CSS und JS auf meiner Homepage und nicht in der Cloud.
 
Zuletzt bearbeitet:
NetAktiv schrieb:
Naja, man muss ja nicht pfuschen, sondern kann sich seine eigene CSS erstellen lassen, das ist eine offiziell vorgeschlagene Vorgehensweise und die ist dann halt lokal bereitzustellen. Es ging hier in erster Linie um den die Änderung und nicht das WIE.
Zum Vergrößern anklicken....
Wenn du eine eigene CSS erstellst, ist es ja egal obs vom CDN kommt oder nicht....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben