1
Wenn ich die Größe des Browser-Fensters verkleinern, möchte ich, dass das im Div enthaltene Bild seine Größe ändert und in der Box bleibt. Ich habe versucht, die Position-Eigenschaft zu verwenden, aber das hat mein Layout gebrochen.Größe des Bildes in einem Div bei reduzierter Browser-Site
Darüber hinaus ist der Hyperlink oben rechts auf der Seite derzeit auf schwarz festgelegt, die durch das globale in CSS festgelegt wird. Wie definiere ich ein anderes Element als unterschiedlich gefärbt?
Vielen Dank
body{
font: 100%/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 100%;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {display: none;}
/* Global */
.container{
width:60%;
margin:auto;
overflow:hidden;
/* Allows the burger nav and branding to sit on the same line */
}
a{
text-decoration: none;
text-shadow: 50px;
color: black;
}
a #class{
color: red;
}
ul{
margin:0;
padding:0;
}
.subscribe{
height:38px;
background:gold;
border:0;
padding-left: 20px;
padding-right:20px;
color:black;
}
.dark{
padding:25px;
background:#35424a;
color:white;
margin-top:10px;
margin-bottom:10px;
}
.maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* Header **/
header{
background:#35424a;
color:white;
padding-top:30px;
min-height:70px;
border-bottom:gold 5px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:100%;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin:0;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight{
color:gold;
}
header a:hover{
color:gold;
}
h3 .bronze{
color:#cc6633;
}
h3 .silver{
color:silver;
}
h3 .gold{
color:gold;
}
/* Showcase */
#showcase{
min-height:400px;
color:black;
}
#showcase h1{
margin-top:50px;
font-size:300%;
margin-bottom:10px;
}
#showcase p{
font-size:120%;
}
/* Newsletter */
#newsletter{
padding:15px;
color:#ffffff;
background:#35424a
}
#newsletter h1{
float:left;
}
#newsletter form {
float:right;
margin-top:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:26px;
width:250px;
}
/* Sidebar */
aside#sidebar{
float:right;
width:25%;
margin-top:10px;
}
aside#sidebar .quote input, aside#sidebar .quote textarea{
width:90%;
padding:5px;
}
/* Main-col */
article#main-col{
float:left;
width:70%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding:10px;
}
#imagery .box i{
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.container .visuals{
float: right;
}
.container .callus{
float: right
}
#callus{
}
/* Services */
ul#services li{
list-style: none;
padding:20px;
border: #cccccc solid 1px;
margin-bottom:5px;
background:#35424a;
color: white;
}
footer{
padding:20px;
margin-top:20px;
color:black;
background-color:gold;
text-align: center;
}
/* Media Queries */
@media(max-width: 768px){
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar{
float:none;
text-align:center;
width:100%;
}
header{
padding-bottom:20px;
}
#imagery{
font-size: 50%;
float: none;
}
#showcase h1{
margin-top:40px;
}
#newsletter button, .quote button{
display:block;
width:100%;
}
#newsletter form input[type="email"], .quote input, .quote textarea{
width:100%;
margin-bottom:5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none; /* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | About</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content = "Darran Brady Plumbing">
<meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name = "author" content ="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active"><a href="home9.html">Home</a></li>
<li><a href="about9.html">About</a></li>
<li><a href="services9.html">Services</a></li>
<li><a href="coverage9.html">Coverage</a></li>
<li><a href="contact9.html">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:200%;" onclick="myFunction()">☰</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
<h2>Our Story | Our Family</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
</p>
<p class="dark">
Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
</p>
</article>
<aside id="sidebar">
<div class="dark">
<a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img src="cat.png" alt="checkatradelogo"></a>
</div>
</aside>
</div>
</section>
<footer>
<p>Darren Brady Plumbing Copyright © 2017</p>
</footer>
</body>
</html>
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
TLDR; Hast du versucht, eine 'max-width: 90%' zu deinem Bild hinzuzufügen? – LinkinTED