Top Nutzer

Thema CSS
  1. 10 P.
  2. 5 P.
  3. 5 P.
HTML/CSS -> Bild auf Startseite an Höhe und Breite des Bildschirms anpassen, sodass die Startseite auf jedem Gerät gleich aussieht?

Hallo,

Ich möchte eine eigene Webseite gestalten welche sich automatisch auf die Größe und Breite des jeweiligen Besucher-Displays anpasst, also unabhängig von der Bildschirmgröße oder Auflösung ist. Die Startseite soll dabei immer den kompletten Bildschirm einnehmen, egal ob dieser schmal und hoch oder breit und flach ist.

Die Startseite enthält ein Bild welches im Hintergrund liegt. Beim scrollen soll direkt der neue Bereich beginnen. Beim öffnen der Seite auf einem normalen PC-Monitor soll das Bild komplett zu sehen sein, auf dem Handy Bildschirm nur ein Ausschnitt. Die Navigationsleiste und das Logo sollen dann in die Mitte rutschen, sodass die Struktur, soweit möglich, beibehalten wird.

Der Bereich unter der Startseite beinhaltet eine horizontale Liste, welche sich auf dem Handy Bildschirm vertikal ausrichten soll, sodass die einzelnen Elemente statt nebeneinander untereinander aufgelistet werden.

Mir ist klar das diese Frage einen viel zu großen Umfang hat, mir würde es aber schon viel helfen wenn mir jemand der sich damit auskennt Tipps geben könnte ob es mit CSS überhaupt realisierbar ist, oder ob man diese Funktionen mit Javascript oder ähnlichen Programmiersprachen umsetzen muss. Auch Tipps zu Büchern oder Internetseiten würden mir echt sehr helfen!

Vielen Dank im Voraus für eure Hilfe! 

Computer, Internet, Technik, HTML, Webseite, CSS, JavaScript, Startseite, Technologie, Webseitenerstellung
4 Antworten
Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

LG

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

Website, HTML, programmieren, CSS
6 Antworten
WP Theme Affiliseo - Vorschaubilder Größe Blogbeiträge?

Hallo,

ich nutze für meine Affiliateseite das Theme Affiliseo und bin auch ziemlich zufrieden damit. Problem nur: Die Größe der Vorschaubilder meiner Blogbeiträge.

Diese sind automatisch 300x300 Pixel groß, was deutlich zu groß ist. Ich möchte das gerne auf 200x200 Pixel setzen. Auch wenn ich die Beitragsbilder in 200x200 Pixel hochlade, skalliert das Theme diese automatisch hoch.

Leider reichen meine Programmierkenntnisse nicht aus um das zu fixen und der Support antwort seit 2 Wochen nicht. -.-

Vielleicht könnte mir dabei ja jemand irgendwie helfen.

Wenn man auf das Bild klickt und "Element untersuchen" sieht man folgenden Code:

<div class="blog-preview-inner-box" style=" height:-40px; overflow: hidden; text-overflow:ellipsis;"><a href="http://www.meinmusikland.de/rocktile-pro-bb104-b-battlebone/"><img style="float:left; margin: 4px 10px 12px 4px;" src="http://www.meinmusikland.de/wp-content/uploads/2018/09/rocktile-pro-battlebone-vorschau-150x150.jpg" width="300"></a><h3 style=""><a href="http://www.meinmusikland.de/rocktile-pro-bb104-b-battlebone/">E-Bass Rocktile Pro BB104-B Battlebone</a></h3>Der Rocktile Pro BB104-B…</div>

Ich habe keine Ahnung wo das Theme die "width="300" hernimmt... Wenn ich das in der Untersuchungsbox auf 200 setze, passt's. Aber wie gesagt keine Ahnung wo ich es im Theme selber ändere, sodass es tatsächlich so ausgegeben wird.

Computer, Technik, HTML, programmieren, CSS, Programmierung, Coding, development, Entwicklung, Technologie, Developing
1 Antwort
Wie erstelle ich einen sich ergänzenden Link mit onClick?

Hallo! Ich bin seit mittlerweile sieben Jahren Beautybloggerin, habe über 3.000 Beiträge und diverse Marken und Kategorien. Nun möchte ich eine „Suche“ erstellen, in der man Kategorie, Zertifizierungen, etc. hinzufügen kann (siehe super gezeichnete Graphik im Bild).

Der Startlink ist webseite . com /search/label

An diesen Link sollen nun die verschiedenen, angeklickten Elemente hinzugefügt werden. Wählt also jemand Element A, soll der Link

webseite . com /search/label/A

darstellen.

Wird aber noch ein zweites, drittes, etc. Element hinzugefügt, muss zwischen den Elementen ein +

Der Link würde also so aussehen: webseite . com /search/label/A+B+C+D+E

Ich habe den folgenden Code versucht, aber das klappt leider nicht. Kann einer von euch schlauen Köpfen mir vielleicht helfen?

Kategorie <select class="select" size="1" name="category">
<option value="Duschen">Duschen</option>
<option value="K&ouml;rperpflege">K&ouml;rperpflege</option>
<option value="Haarpflege">Haarpflege</option>
<option value="Handpflege">Handpflege</option>
<option value="Make%20Up">Dekorative Kosmetik</option>
</select>  Zertifizierung <select class="select" size="1" name="cert">
<option value="Vegan">Vegan</option>
<option value="BDIH">BDIH</option>
<option value="ECOCERT">ECOCERT</option>
<option value="NaTrue">NaTrue</option>
<option value="FAIRTRADE">FAIRTRADE</option>
</select>  <br />
<input value="" id="query" type="text" /><br />
<a onclick="this.href=this.href+document.getElementById('category')+document.getElementById('cert')?q=+document.getElementById('query').value;" href="https://www.gooloo.de/search/label/">Abfragen</a>
Blog, HTML, CSS, JavaScript, Blogger, JQuery, Webdesign, OnClick
1 Antwort
Html Box auf ganze Seite auffülen?

Wie kann ich die Box zwischen "Über mich" und dem Footer links, rechts und unten bis zum Rand ausfüllen.

<center>	  
	<div style="text-align: center;background-color:#4AD10C;border-radius: 50px;padding-bottom: 10px;padding-top: 10px;width: 520px;font-size: 17px">  
	  
	  <h1><b>Bewerbung als Supporter</b></h1>
  </div>	
   
  <head><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
 (adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: "ca-pub-1118001454023819",
  enable_page_level_ads: true
 });
</script>
	  
	  
	  
	  	<br>
		<br>
		<br>
	  	<br>
		<br>
		<br>
	  	<br>
		<br>
		<br>
	  	<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	  	<br>
		<br>
		<br>
		<br>
		<br>
		<br>
	  	<br>
		<br>
		<br>
&nbsp;&nbsp;
&nbsp;&nbsp;
&nbsp;&nbsp;
&nbsp;&nbsp;&lt;/head&gt;

      </center>   <center>        <div style="background-color:yellow;width: 100%;">        <br>       <br>                     <div style="width: 600px; margin: auto; background-color:#7597C1; border-radius: 25px;padding-left: 15px;text-align: center;height: 90px;padding-bottom: 5px;padding-top: 5px;padding-left: 5px;padding-right: 5px;height: 100px;">         <a href="forum.html" style="text-decoration: none">               <span style="color: black"><h1>Über mich</h1></span>                    </a>      </div>                   <br />   <br>   <br>           <div style="width: 600px; margin:auto;background-color:#30910A; border-radius:25px;;text-align:center;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;height: 100px">       <a href="blog.html;" style="text-decoration: none">               <span style="color: black"><h1>Erfahrung mit Minecraft / GommeHD.net</h1></span>       </a>           </div>      <br />   <br>   <br>           <div style="width: 300px; margin: auto; background-color: lightgreen; border-radius:25px;text-align: left;padding-left: 15px;padding-top: 5px;padding-bottom: 5px">          <span style="color:brown"><h1></h1></span>         <h3>       </h3> </div>       <br />   <br>   <br>                                            <div style="color: aliceblue;background-color: black;padding-top: 1px;padding-bottom: 1px;border-radius:50px ;height: 50px;padding-top: 2px;padding-bottom: 2px">      <footer>        <center>          <h5>            © 2018 Webtutorial | Created by MapHD | <a href="Kontakt.html" style="color: aliceblue">Kontakt</a>          </h5>        </center>     </footer>   </div>       <br>   <br>   </div>

            </center> 

Es sol dann so aussehen:

HTML, CSS
2 Antworten
Website Text fehlt?

Bei der Website ist der Text auf einmal weg wenn der Monitor zu klein ist. Wie kann ich machen das man wenn der Monitor zu klein ist einfach Runter scrollen muss?

HTML:

</header>
<section id="home">
    <hr>
    <br>
    <br>
    <br>

    <h1>JR-Pipes</h1>
    <h2>Pfeifen mit Qualität</h2>

    <div id="info1">
    <p align="center">
        Willkommen auf der Offizielen Website von Ries-Pipes.
        Hier werden Handmade Pfeifen verkauft.
        Wenn sie einen kleinen Vorgeschmack haben wollen,
        gehen sie zu unserer Bildergalerie und lassen sie sich überzeugen.
        Wenn sie interesse an einer Pfeife haben können sie einfach <a href="Contact.html"><u>hier</u></a> klicken, das Formular ausfüllen
        und auf eine Rückantwort unsererseits warten.</p>
    </div>

</section>

<footer id="footer">

CSS:

html, body{
    margin: 0;
    padding: 0;
   https://www.hausjournal.net/wp-content/uploads/Mammutbaum-Holz.jpgaum-Holz.jpgaum-Holz.jpg");
    background-size: cover;
}
section{ height: auto; overflow: hidden;}


a { text-decoration: none; } li { list-style-type: none; }


h1, h2, h3, a { font-family: 'Roboto', sans-serif; font-weight: 500; color: #2e2e2e; }


h2{ color: #242a2c; }


h3{ font-size: 40px; padding-top: 8%; margin: 5px; }


h4, p { font-family: 'Roboto Slab', Serif; color: #494949; }


hr{ width: 40px; height: 3px; background: #494949; border: 0; margin: 0 auto 30px auto; }



home{

background-image: url("img/Mammutbaum-Holz.jpg");
background-size: 100%;

}



home h1{

margin: 0px auto 0 auto;
font-size: 110px;
text-align: center;

}



home h2 {

margin: 0 auto 0 auto;
font-size: 25px;
text-align: center;

}



home p{

font-size: 30px;
font-weight: bold;

}



home a{

font-size: 30px;
font-weight: bold;
color: #f9ff00;

} #info1{ height: auto; }



info1 p{

font-size: 30px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 0px;

}
Internet, Website, HTML, programmieren, CSS, html5
2 Antworten
Was ist an diesem Script falsch über die Koordinaten der Sonne?

Hallo ich habe in html und Javascript probiert einen Rechner zu Programmieren, der die Rektaszensions und Deklinations daten der Sonne anzeigt, zu dem vorher Eigegebenen Datum. Da muss irgendwo ein Fehler sein aber ich weiß nicht was. Wisst ihr wo der Fehler ist?

hier ist der Script:

<!DOCTYPE html>

<html lang="de">

 <head>

  <meta-charset="utf-8">

 </head>

 <body>

  <div>

 <p>Jahr</p>

 <input type="text" id="Ja">

 <br/>

 <p>Tagesnummer</p>

 <input type="text"id ="Ta">

 <br/>

 <p>Rektaszension</p>

 <input type="text" id="Rektaszension">

 <br/>

 <p>Deklination</p>

 <input type="text" id="Deklination">

 <input type="Button" value="berechnen" onclick="berechnen ()">

  

 <script type="text/jscript">

   function berechnen(){

   

alert("hello");

var Jaa = document.getElementById("Ja").value;

var Taa = document.getElementById("Ta").value;

var T = 0.01*(Jaa-2000+(Taa-1)/365.25;

var P2 = Math.PI*2;

var M = P2*frac(0.0993133 + 99.97361 * T);

var Dl = 6893.0*Math.sin(M)+72.0*Math.sin(M+M);

var L =P2 * frac(0.7859453+M/P2+(6191.2*T+Dl)/1.296e+6);

var x = Math.cos(L);

var Y = 0.91748*Math.sin(L);

var Z = 0.39778*Math.sin(L);

var r = Math.sqrt(1.0-Z*Z);

var Deklinationä = (360/P2)*Math.atan(Z/r);

var Rektaszensionä = (48.0/P2) *Math.atan(Y/(X+r));

document.getElementById("Rektaszension").value = Rektaszensionä;

document.getElementById("Deklination").value= Deklinationä;

}

 </script>

 </div>

 </body>

</html>

Computer, Sonne, CSS, JavaScript, html5, Astronomie, Code, Deklination, Rektaszension
1 Antwort
Warum funktioniert padding aber nicht padding-top?

Hi ich weiß ich schreibe den Code öfter rein aber ich schreibe ihn immer neu damit ich auf alle Probleme vorbereitet bin später. Ich werde immer besser :).

Wenn ich padding schreibe dann zeigt mir meine Website zwar einen Seitenabstand im Blockelement an aber keinen oben. Mein Text also der in <a> wird irgendwie nach oben gedrückt im Menü. Der Fehler ist in der CSS Datei bei :

#navigation ul li a

Hier die html datei:

<!DOCTYPE html>
<html>
<head>
    <link href="style2.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <meta charset="utf-8">
        <title>Tagesschau</title>
</head>
    
<body>
    <header>
    <nav id="navigation">
        <ul>
        <li><a href="#">ARD Home</a></li>
        <li><a href="#">Nachrichten</a></li>
        <li><a href="#">Sport</a></li>
        <li><a href="#">Börse</a></li>
        <li><a href="#">Ratgeber</a></li>
        <li><a href="#">Wissen</a></li>
        <li><a href="#">Kultur</a></li>
        <li><a href="#">Kinder</a></li>
        <li><a href="#">Die ARD</a></li>
        <li><span style="margin-left: 20px;"></span></li>
        
        <li class="menuerechts"><a href="#"><b>Kultur</b></a></li>
        <li class="menuerechts"><a href="#"><b>Kinder</b></a></li>
        <li class="menuerechts"><a href="#"><b>Die ARD</b></a></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/ARD_logo.svg/220px-ARD_logo.svg.png" width="70px;" id="ardmenuelogo"></li>
        
        
        
        </ul>
        
        
    
    </nav>
    </header>
    
    <p>fsdf</p>
    
</body>
</html>

Hier die CSS:

*{
    margin: 0;
}
body{
    background-image: url(TagesschauHintergrund.jpg);
    background-size:cover;
}

navigation{

    float: left;     width: 100%;    // background-color: rgb(16,45,100,0.7);     height: 34px;     border-bottom: white 1px;     position: fixed; }

navigation ul{

    margin-left: 175px;      }

navigation ul li{

    list-style: none;     float: left;            } #navigation ul li a{    padding:18px;     text-decoration: none;     color: white }

navigation li a:hover{

    text-decoration: none;     color: white;     background-color: rgb(16,45,100); }

p{     height: 10000px; }

Computer, Website, Technik, HTML, Webseite, programmieren, CSS, JavaScript, PHP, Technologie
4 Antworten

Meistgelesene Fragen zum Thema CSS

Wie schreibt man in Discord farbig?

3 Antworten

Coole Gamer Namen (Fällt euch was ein)

32 Antworten

CSS Bildgröße automatisch an div-Box anpassen

2 Antworten

Eine Div immer im Vordergrund, wie?

4 Antworten

Mit welchem Befehl kann man ein Bild bei html mittig positionieren?

7 Antworten

CSS Konsole öffnen

2 Antworten

wie kann ich mittels css ein bild rot färben?

4 Antworten

CSS von beliebiger Homepage anzeigen lassen

5 Antworten

überschrift und bild in einer zeile (HTML)

6 Antworten

CSS - Neue und gute Antworten