0
Bitte beziehen Sie sich auf das Bild. Ich möchte eine margin-left auf dem ersten Bild hinzufügen und dann im Rest des Bildes will ich sie nicht. Kann ich die Kinderselektoren verwenden, um dies zu erreichen oder gibt es einen anderen Weg?Wie kann ich die Kinderselektoren hier verwenden?
Kann ich die Bilder machen, overflow: scroll wie wir im Falle von Text tun? Da ich jquery/javascript jetzt nicht kenne.
* {
\t box-sizing: border-box;
}
body {
\t background:gray;
\t
\t /*border: 2px solid yellow;*/
}
.wrapper {
\t width: 93%;
\t height: auto;
\t margin: auto;
}
.headwrap {
\t
\t padding-top: 70px;
}
.logo {
\t margin: 0;
\t float: left;
}
.socialbuttons {
\t float: right;
\t
\t
}
.socialbuttons ul {
\t list-style: none;
\t float: right;
\t
}
.socialbuttons ul li {
\t float: left;
\t width:50px;
\t height:50px;
\t padding:0;
\t margin-right: 30px;
\t background: #000;
\t border-radius:30px; \t
}
.socialbuttons ul li img{
\t margin-left:20px;
\t margin-top:20px;
}
.navbar {
\t margin-top: 40px;
\t width: 100%;
\t background: #db3636;
\t float: left; /* this and see changes */
}
.navbar ul {
\t list-style: none;
\t margin: 0;
\t padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
\t /* float producing wrong results */
}
.navbar ul li {
\t float: left; /* height of menu bar increases when float is defined */
\t display: inline; /* does it have any use ? */
\t padding: 25px 10px;
\t border-right: 1px solid black;
\t border-left: 1px solid black;
\t color: white;
\t font-size: 14px;
\t font-weight: bold;
\t font-family: sans-serif;
\t text-align: center;
\t width: 15%;
}
.navbar ul li:first-child {
\t border-left: none;
}
.navbar ul li:last-child {
\t border-right: none;
}
.clearfix {
\t *zoom: 1;
}
.clearfix:before,
.clearfix:after {
\t display: table;
\t content: "";
\t line-height: 0;
}
.clearfix:after {
\t clear: both;
}
.slider img {
\t float:left;
\t width:100%;
}
.text{
\t color:white;
\t margin-top:-35%;
\t float:left;
\t margin-left: 80px;
\t font-weight: bold;
\t font-family: Helvetica, Arial, Sans-Serif;
\t font-size : 50px;
\t line-height: .5;
}
#project {
\t background-color: #555653;
\t width: 100%;
\t margin-top: 10px;
\t float: left;
}
.head {
\t float: left;
\t background-color: #1D1D1C;
\t width: 100%;
}
.head h3 {
\t color: white;
\t font-family: Arial , sans-serif;
\t font-weight: lighter;
\t margin-left: 20px;
}
.imgContainer img {
\t margin-top: 20px;
\t padding-left: 40px
}<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
\t <div class="wrapper">
\t \t <header class="headwrap">
\t \t \t <div class="logo">
\t \t \t \t <img src="logo.png" alt="Damion max">
\t \t \t </div>
\t \t \t <div class="socialbuttons">
\t \t \t \t <ul>
\t \t \t \t \t <li><img src="facebook.png"></img></li>
\t \t \t \t \t <li><img src="twitter.png"></img> </li>
\t \t \t \t \t <li><img src="feed.png"></img></li>
\t \t \t \t \t <li><img src="google.png"></img></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <nav class="navbar">
\t \t \t \t <ul class="clearfix">
\t \t \t \t \t <li style="width:5%;"><img src="home.png"></li>
\t \t \t \t \t <li>ABOUT US</li>
\t \t \t \t \t <li>GALLERY</li>
\t \t \t \t \t <li>EVENTS</li>
\t \t \t \t \t <li>BLOG</li>
\t \t \t \t \t <li>CONTACTS</li>
\t \t \t \t \t <li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t </header>
\t \t <div class="slider">
\t \t \t <img src="industrial.jpg" />
\t \t <div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
\t \t </div>
\t \t <div id="project">
\t \t \t <div class="head">
\t \t \t \t <h3>FEATURED PROJECTS</h3>
\t \t \t </div>
\t \t \t <div class="imgContainer">
\t \t \t \t <img src="1.jpg"/>
\t \t \t \t <img src="2.jpg"/>
\t \t \t \t <img src="3.jpg"/>
\t \t \t \t <img src="4.jpg"/>
\t \t \t \t <img src="5.jpg"/>
\t \t \t \t <!--<img src="6.jpg"/>-->
\t \t \t </div>
\t \t </div>
\t \t
\t \t
\t \t
\t \t
\t \t
\t \t
\t </div>
</body>
</html>
Selektor: first-child {..} Stile Sie diese –
ja :) Vielen Dank – Tarique
willkommen verwenden können.) ..... –