Forum Mjukvara Programmering och digitalt skapande Tråd

Bild syns ej

1
Skriv svar
Permalänk
Medlem
●

Bild syns ej

Hej!

Har denna HTML och CSS. Får inte bilden att visas. Det är en gammal fil om det kan ha med det att göra.

Det ska bli en bild med halvgenomskinlig meny.

!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Genomskinlig meny</title>

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

    </head>
    <body>
        
       <div id="menuField">
            <div id="menu">
                <ul style="list-style-type:none" id="inner">
                        <li>  <a href="http://www.w3schools.com/html/">w3schools</a> </li>
                        <li>  <a href="http://www.csszengarden.com/">CSS Zen Garden</a> </li>
                        <li>  <a href="https://css-tricks.com/">CSS-tricks</a> </li>
                </ul>
            </div>
       </div>
</html>

html { 
           background: url(img/newYorkBW.jpg) no-repeat center center fixed; /* picture is here*/
           -webkit-background-size: cover;
           -moz-background-size: cover;
            -o-background-size: cover;
             background-size: cover;
             padding: 0px;
}

#menuField  /* id for black panel*/
{
     color: #FFFFFF;                
     width: 100%; 
     height: 100px;
     background-color: #000000; 
     position: relative;
     top: 450px;
     opacity: 0.75; /* How tranparent the panel will be. 1 is not at all*/
 }

#menu{  /* id for black element*/
    font-size: 22px;
    padding-top: 35px;
}
/* unvisited link */
li a:link {
    color: white;
}

/* visited link */
li a:visited {
    color: white;
}

/* mouse over link */
li a:hover {
    color: gray;
}

/* selected link */
li a:active {
    color: gray;
}

li {
    float: left;
}

/* Every link inside <li> but not outside of it*/
li a {
     padding: 28px;
     text-decoration: none;
     font-weight: bolder;
}

/* To center the menu*/
#inner {
    width: 50%;
    margin: 0 auto; 
}

body {  /* To make the elements to alll the way out to the edge*/

    margin: 0;
    padding: 0;
}
Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Du har glömt fnuttarna.

Fel:

background: url(img/newYorkBW.jpg)

Rätt:

background: url("img/newYorkBW.jpg")

Utgår från att du har bilden i samma directory -> img som koden?

Also, lägg några minuter på att fixa indenteringen. Det blir väldigt svårläst som det är nu, särskilt med kommentarer inuti cssklasserna osv.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av izzie:

Du har glömt fnuttarna.

Fel:

background: url(img/newYorkBW.jpg)

Rätt:

background: url("img/newYorkBW.jpg")

Utgår från att du har bilden i samma directory -> img som koden?

Also, lägg några minuter på att fixa indenteringen. Det blir väldigt svårläst som det är nu, särskilt med kommentarer inuti cssklasserna osv.

Gå till inlägget

1. Det fungerar inte ändå. Ska det vara fnuttar i CSS?
2. Förstår inte riktigt problemet med intenderingen.

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Larsp777:

1. Det fungerar inte ändå. Ska det vara fnuttar i CSS?
2. Förstår inte riktigt problemet med intenderingen.

Gå till inlägget

https://www.w3schools.com/cssref/css3_pr_background.php

Fungerar bilden om du öppnar den på dess plats? Ligger bilden i en folder som heter img i samma mappstruktur som ditt kodprojekt?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av izzie:

https://www.w3schools.com/cssref/css3_pr_background.php

Fungerar bilden om du öppnar den på dess plats? Ligger bilden i en folder som heter img i samma mappstruktur som ditt kodprojekt?

Gå till inlägget

Ok, tack! Tyvärr fungerar det inte ändå.

Bilden ligger i en mapp som heter img som ligger på samma ställe som html-filen.

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Larsp777:

Ok, tack! Tyvärr fungerar det inte ändå.

Bilden ligger i en mapp som heter img som ligger på samma ställe som html-filen.

Gå till inlägget

Kan det vara så att du har Windows standardinställning med dolda filändelser så du tror filen heter newYorkBW.jpg men egentligen har det blivit newYorkBW.jpg.jpg ?

Visa signatur

Ryzen 7 7800X3D | ASUS TUF Gaming B650-Plus WIFI | Kingston 32GB (2x16GB) DDR5 6GT/s CL30 FURY Beast | Kingston Fury Renegade M.2 NVMe SSD Gen 4 2TB | MSI RTX 4060 8GB | Fractal Design Define S | MSI MPG A850G 850W | Thermalright Phantom Spirit 120 SE | Windows 11 Pro | AOC 27" AGON AG276QZD2 OLED QHD 240 Hz

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Joppis:

Kan det vara så att du har Windows standardinställning med dolda filändelser så du tror filen heter newYorkBW.jpg men egentligen har det blivit newYorkBW.jpg.jpg ?

Gå till inlägget

Kanske, ska kolla, tack!

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag lyckades efter lite googlande lösa det.

Som jag förstår det måste man först gå upp en nivå från CSS-filen och sedan ner i img om man har bilden där.

           background: url("../img/color.jpg") no-repeat center center fixed; /
Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Larsp777:

Jag lyckades efter lite googlande lösa det.

Som jag förstår det måste man först gå upp en nivå från CSS-filen och sedan ner i img om man har bilden där.

           background: url("../img/color.jpg") no-repeat center center fixed; /
Gå till inlägget

Måste och måste... Men ja, du måste antingen ange en relativ eller en absolut sökväg.

Om bilden ligger på example.com/img/color.jpg så går det bra att ange "/img/color.jpg" (notera inledande /, detta är en absolut sökväg och / = root), men det går också att ange en sökväg relativt som du gjort ovan.

Redigera
Citera flera Citera
1
Skriv svar