Hilfe CSS HTML?

Hallo,

Ich lerne sehr September CSS and HTML und jetzt sollen wir eine Navigation erstellen:

Bild - Link - Link - Link - Bild

Aber wenn ich es mache sind die Bilder trotz Width und height riesig und die Verlinkung am Boden, nicht wie versucht auf mittelhohe.

Es gibt noch n zweites Problem,

Es sind adere Dateien in anderen Unterordnern und ich weiß nicht wie zu verlinken, wir haben bisher nur mit Dateien in dem gleichen Ordner gearbeitet

Hope you can help me

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

28.11.2023, 03:28

1) Die Bildgröße kannst du via CSS dem umgebenden Container anpassen. Eine vertikale Ausrichtung klappt via Flexbox und align-items.

Beispiel:

Im Markup werden zunächst alle Elemente ihrer Reihenfolge entsprechend in einem nav-Element aufgelistet. Die Bilder liegen in extra Containern, über die Attribute height und width kann der Browser das Seitenverhältnis des jeweiligen Bilds berechnen.

<nav class="navigation">
  <div class="logo">
    <img alt height="643" src="..." width="857">
  </div>
  <ul class="link-list">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
  <div class="right-image">
    <img alt="..." height="643" src="..." width="857">
  </div>
</nav>

Die Bildgröße, auf die der Browser ein Bild anschließend skalieren soll, wird via CSS bestimmt. Konkret angegeben wird nur die Containerbreite. Die Bildhöhe wird dynamisch anhand des Seitenverhältnis berechnet.

img {
  height: auto;
  width: 100%;
}

.logo {
  width: 100px;
}

.right-image {
  width: 150px;
}

Das Logo skaliert somit auf eine Pixelgröße von 100 x 75, das rechte Bild auf 150 x 113.

Die Ausrichtung / Positionierung der Elemente wiederum könnte folgendermaßen umgesetzt werden:

.navigation,
.link-list {
  column-gap: 10px;
  display: flex;
}

.link-list {
  align-items: center;
  background: yellow; /* for demo only */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Das Flexboxlayout positioniert alle Elemente horizontal nebeneinander. Da die Linkliste die Links als separate Kindelemente aufführt, muss sie ebenfalls zur Flexbox werden. Mit align-items werden die Listeneinträge vertikal zentriert.

Die Höhe der Linkliste richtet sich dabei an dem höchsten Bildelement in der Navigation aus. Wenn du das nicht möchtest, gib dem Element eine individuelle Höhe (height).

2) Du kannst entweder relative Pfade bilden oder absolute Pfade, ausgehend vom Rootverzeichnis deiner Webseite.

Das folgende Beispiel geht einmal von so einer Dateistruktur aus:

root
  home
    index.html
    styles
      styles.css
  news
    story1.html
    story2.html
  images
    news
      image1.jpg
      image2.jpg

HTML (root/home/index.html):

<!doctype html>
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <link href="styles/style.css" rel="stylesheet">
</head>
<body>
  <figure>
    <img alt="..." src="../images/news/image1.jpg">
    <figcaption>
      <p>Some text about story 1</p>
      <a href="../news/story1.html">Read more</a>
    </figcaption>
  </figure>
  <figure>
    <img alt="..." src="../images/news/image2.jpg">
    <figcaption>
      <p>Some text about story 2</p>
      <a href="../news/story2.html">Read more</a>
    </figcaption>
  </figure>
</body>

Die CSS-Datei liegt in einem Subverzeichnis. Man kann sie wie angegeben über Verzeichnisname/Dateiname ansteuern. Der Slash steht für den Verzeichniswechsel bzw. für das Öffnen des zuvor angegebenen Verzeichnisses (Suche styles > Öffne > Suche style.css).

In einer Langform könnte man auch ./styles/style.css schreiben. Der Punkt kennzeichnet, dass man vom aktuellen Verzeichnis (in diesem Fall home) aus startet.

Um in ein übergeordnetes Verzeichnis zu wechseln, wird ../ genutzt. Bei ../news/story1.html wechselt man zuerst in das Rootverzeichnis und ausgehend davon dann in den Unterordner news.

Wenn deine Webseite über einen Webserver ausgespielt wird und ein Pfad mit Slash beginnt, liegt der Kontextstart im Rootverzeichnis. Das heißt, auf die story1.html könntest du auch via /news/story1.html zugreifen.

Eine dritte Option, um Pfade anzugeben, wären absolute Adressen. Die würden beispielsweise. den Domainnamen inkludieren (Beispiel.: https://deine-webseite.de/news/story1.html). Im Vergleich zu den zuvor vorgestellten Verzeichnisangaben haben sie allerdings den Nachteil, nicht so flexibel zu sein, denn sollte sich einmal der Stammpfad/der Domainname ändern, müsstest du im gleichen Zug auch alle Pfadangaben anpassen.

Ähnliche Fragen

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zur Frage

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

...zur Frage

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zur Frage

Html und CSS Datei verbinden?

Hallo,

und zwar ist meine Html Datei in einem separaten Ordner und meine CSS Datei auch. Ich will meine Html Datei mit der CSS Datei verbinden, aber ich weiß nicht wie. Ich will auch nicht das meine Html Datei und meine CSS Datei in einem gemeinsamen Ordner sind, will es übersichtlicher halten.

Also kann mir jemand helfen???

...zur Frage

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zur Frage

CSS Grüne Blöcke nacheinander anzeigen lasen?

Von oben nach unten, aber ohne zusätzliche HTML Tags wie <div> <p> oder <br>.

Der Code sieht so aus <div> a*3 </div> nichts besonderes und dann noch bisschen padding height width background-color

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zur Frage

style Datei im Header CSS?

Ist der style tag im Header der Html Datei eine Verlinkung zu der CSS Datei?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen