Question

将图像添加到标题后，

我的左侧边栏消失了！

以下是现在的样子：

通常情况下左侧边栏与右边的水果相同。有人知道为什么会这样吗？

我添加的图像位于＆＃34; headerimage＆＃34;类。 HTML和CSS代码如下所示。

代码HTML：

<body>

    <!-- HEADER -->

    <div class="header">
        <a href="Design.html"><img src="Logo Greenery.png" class="image"</a>
        <div class="headerimage"><img src="vegatbles.png" style=" width:200px; height:150px; /></div>
    </div>

        <!--LEFT-BAR-->
        <div class="left-side"></div>

            <!--NAV-BAR-->
            <div class="navbar-nav" style="text-align: center;">
                <!-- Navigatiebar met de links erin -->

                <button type="button"><a href="HtmlPage.html">Producten</a></button>
                <button type="button"><a href="#">Registreren</a></button>
                <button type="button"><a href="#">Over ons</a></button>
                <button type="button"><a href="#">Contact</a></button>

            </div>

                <!--RIGHT-BAR-->
                <div class="right-side"></div> 

                        <!--CONTENT-->
                    <div class="Content">

                        <h1 style="text-align:center;">Hoofdstuk 1</h1>


        <h3>Een digitale tekst, elektronische tekst of e-tekst bestaat in principe uit een code voor ieder teken (in tegenstelling tot een grafische weergave zoals bij een letter op papier, en in tegenstelling tot een klank), eventueel aangevuld met opmaakcodes. (De meest basale codes die geen zichtbare tekens representeren zijn die voor de spatie en de nieuwe regel.) Dit maakt efficiënte elektronische opslag mogelijk, bijvoorbeeld als een txt-, html-, doc- of pdf-bestand, of in een van de speciale formats voor e-boeken.

            Voordelen van een digitale tekst ten opzichte van een tekst op papier zijn (een en ander voor zover deze mogelijkheden niet zijn ingeperkt, zoals bij Digital Rights Management, en verder afhankelijk van het bestandstype en de software) de doorzoek-, bewerk-, kopieer- en verzendbaarheid (onder andere e-mail en sms), de geringe massa en het geringe volume van een gegevensdrager, de instelbaarheid van de lettergrootte met automatische aanpassing van de hoeveelheid tekst op een regel aan de scherm- of vensterbreedte zodat zo veel mogelijk tekst op een regel staat zonder dat horizontaal scrollen nodig is, en de mogelijkheid tot keuze van een lettertype.

            Een nadeel is dat een apparaat en software nodig zijn om een tekst te kunnen lezen (de codes worden daartoe terugvertaald naar de grafische weergave op een beeldscherm) of te annoteren/bewerken/schrijven.

            Een tussenvorm waarbij de voordelen gedeeltelijk van toepassing zijn is het als afbeelding opslaan van ingescande tekstpagina's. Dit wordt toegepast als de tekst oorspronkelijk op papier stond en het te veel werk is om de tekst te digitaliseren (eventueel met OCR), of als men de oorspronkelijke opmaak exact wil behouden. In het laatste geval wordt ook wel een combinatie. toegepast van digitalisatie ten behoeve van doorzoekbaarheid, maar weergave als afbeelding.

            Omzetting van digitale tekst naar tekst op papier gebeurt met een printer.</h3>

                                    </div>

                            <!--FOOTER-BAR-->
                            <div class="footer-side">

                            </div>

代码CSS：

 body {

 margin-left:240px;
 background-color:antiquewhite;


 }

 .header{

width: 1300px;
height: 154px;
background-color: green;
border-radius: 25px;

  }

.headerimage{

margin-right: 30px;
float: right;
}

 .navbar-nav {
background-color: tan;
text-align: center;
vertical-align: center;
height: 60px;
width: 1300px;
margin-left: 0px;
border-radius: 25px;



   }


 .left-side {

float: left;
width: 100px;
height: 1000px;
margin-top: 60px;
margin-right: 50px;
background-image: url('fruittest.png');
background-size: auto;
border-radius: 25px;




  }

 .right-side {

float: right;
width: 100px;
height: 1000px;
margin-top: 0px;
margin-left: 40px;
background-image: url('fruittest.png');
background-size: auto;
border-radius: 25px;



   }

 .footer-side{


height: 100px;
width: 1300px;
background-color:green;
text-align: center;
margin-top:1000px;


  }

  .content{



margin-top: -1000px;
margin-bottom: 200px;


     }

Answer 1

此行中有错误：

<a href="Design.html"><img src="Logo Greenery.png" class="image"</a>

替换为

<a href="Design.html"><img src="Logo Greenery.png" class="image"></a>

Answer 2

解决：

的CSS：

.imagee{

margin-right: 750px;

}

HTML：

 <!-- HEADER -->

    <div class="header">
        <a href="Design.html" class="imagee"><img src="Logo Greenery.png"/></a>
        <img src="vegatbles.png" style=" width:200px; height:150px; class="headerimage" />
    </div>

将图像添加到标题后，左侧边栏消失了

2 个答案: