This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"
Related
I have some panels for recipes which have a photo and a title, but the title is too long and I need it to be that size. But word-break: break-word; isn't working. This is what I mean:
This is my code:
<div class="recipe-container">
<div class="recipe-window">
<img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/millionaires-shortbread-52587dd.jpg?quality=90&webp=true&resize=300,272">
<p class="recipe-title">Millionare's Shortbread</p>
</div>
<div class="recipe-window">
<img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-559666_11-b53071d.jpg?quality=90&webp=true&resize=300,272">
</div>
</div>
.recipe-container {
margin: 0px;
padding: 10px;
display: inline-flex;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: auto;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 40px;
}
How can I fix this?
You need to set the width of .recipe-window to min-content.
.recipe-container {
margin: 0px;
padding: 10px;
display: inline-flex;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
}
.recipe-title {
color: black;
margin: 0;
margin-top: 5px;
font-size: 40px;
}
<div class="recipe-container">
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/easy-millionaires-shortbread">
<img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/millionaires-shortbread-52587dd.jpg?quality=90&webp=true&resize=300,272" />
</a>
<p class="recipe-title">Millionare's Shortbread</p>
</div>
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf">
<img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-559666_11-b53071d.jpg?quality=90&webp=true&resize=300,272" />
</a>
</div>
</div>
.recipe-container {
margin: 0px;
padding: 10px;
display: inline-flex;
flex-wrap: wrap;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
width: 300px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 40px;
}
<div class="recipe-container">
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/easy-millionaires-shortbread">
<img
src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/millionaires-shortbread-52587dd.jpg?quality=90&webp=true&resize=300,272">
</a>
<p class="recipe-title">Millionare's Shortbread</p>
</div>
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf">
<img
src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-559666_11-b53071d.jpg?quality=90&webp=true&resize=300,272">
</a>
</div>
</div>
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
I am trying to replicate the BBC News site and I have this weird styling problem.
Here is the image.
I always get this gap in between two of my divs.
Here is the code I used. Not sure how I am supposed to go about getting rid of that space. tried setting margin and padding to 0 but that didn't work.
Here is the code:
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#topbar{
height: 40px;
width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}
#logo{
float: left;
margin-top: 8px;
margin-right: 8px;
}
.topbarsections{
float:left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image{
float: left;
width: 30px;
margin-top: 7px;
margin-left: 8px;
}
#signin-text{
float: left;
font-weight: bold;
font-size: 90%;
color: #333333;
position: relative;
top: 13px;
padding-right: 80px;
}
.topbar-menu{
float: left;
font-weight: bold;
color: #333333;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow{
height: 13px;
margin-left: 15px;
}
#search-box{
background-color: #E4E4E4;
margin: 8px 0 0 10px;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
width: 140px;
float: left
}
#magnifying-glass{
margin-top: 8px;
height: 26px;
}
.clear{
margin: 0;
padding: 0;
}
#news-bar{
background-color: #BB1919;
width: 100%;
height: 70px;
}
#inner-news-bar{
background-color: #BB1919;
margin: 0 auto;
width: 1200px;
height: 70px;
}
#news-bar h1{
color: white;
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 45px;
}
#menu-bar{
background-color: #A91717;
width: 100%;
height: 35px;
}
#inner-menu-bar{
background-color: #A91717;
width: 1200px;
height: 35px;
margin: 0 auto;
}
.menu-bar-sections{
float: left;
border-right: 1px solid #BB4545;
padding-left: 10px;
padding-right:8px;
position: relative;
top: -5px;
}
.menu-bar-sections a{
float:left;
color: white;
text-decoration: none;
}
.menu-bar-sections a:hover{
text-decoration: underline;
}
#menu-bar-more-section{
border-right: none !important;
}
#down-arrow{
float: left;
height: 13px;
position: relative;
top: 2px;
margin-left: 2px;
}
#page-container{
width: 1200px;
margin: 0 auto;
}
h2{
}
<body>
<div id="topbar">
<img id="logo" src="images/bbclogo.png">
<div id="signin-div" class="topbarsections">
<img src="images/singin.PNG" id="signin-image">
<span id="signin-text">Sign in</span>
</div>
<div class="topbarsections topbar-menu">
News
</div>
<div class="topbarsections topbar-menu">
Sports
</div>
<div class="topbarsections topbar-menu">
Weather
</div>
<div class="topbarsections topbar-menu">
Shop
</div>
<div class="topbarsections topbar-menu">
Earth
</div>
<div class="topbarsections topbar-menu">
Travel
</div>
<div class="topbarsections topbar-menu">
More
<img id="more-arrow"src="images/more-arrow.PNG">
</div>
<div class="topbarsections">
<input id="search-box" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="images/glass.PNG">
</div>
</div>
<div class="clear"></div>
<div id="news-bar">
<div id="inner-news-bar">
<h1>NEWS</h1>
</div>
</div>
<div class="clear"></div>
<div id="menu-bar">
<div id="inner-menu-bar">
<p class="menu-bar-sections">Home</p>
<p class="menu-bar-sections">Video</p>
<p class="menu-bar-sections">World</p>
<p class="menu-bar-sections">US & Canada</p>
<p class="menu-bar-sections">UK</p>
<p class="menu-bar-sections">Business</p>
<p class="menu-bar-sections">Tech</p>
<p class="menu-bar-sections">Science</p>
<p class="menu-bar-sections">Stories</p>
<p class="menu-bar-sections">Entertainment & Arts</p>
<p class="menu-bar-sections">Health</p>
<p class="menu-bar-sections" id="menu-bar-more-section">More<img src="images/down-arrow.PNG" id="down-arrow"></p>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
</div>
</div>
</body>
If by "gap" you mean the space above the heading "Technology", #Olivier Krull is right: that's the default margin of the h2 header.
You can simply add this CSS rule to set it to zero:
#main-article > h2:first-child {
margin-top: 0;
}
I am trying to make a header wider, so that it extends to both sides of the browser size. I have all of my content inside of a wrapper div that is set to 990px. My header is the part I want to be full width. I also am trying to make my header have a fixed position. But when i put the corrected position into the css for the header, the title and the navigation bar stack vertically and do not remain how I originally set them.
<body>
<div class="wrapper">
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="main">
<p>Welcome to the #1 stop in automotive today</p>
<div class="article">
<img class="image" src="http://cdnedge.vinsolutions.com/dealerimages/Dealer%204697%20Images/content/car-tire-repair.jpg">
</div>
<div class="article">
<img class="image" src="http://www.lonniesautomachineshop.com/shopimg/Engines1.jpg">
</div>
<div class="article">
<img class="image" src="http://image.superstreetonline.com/f/features/modp-1011-castrol-syntec-top-car-challenge-nissan-gtr/29181584/eurp_1011_02_o+castrol_syntec_top_car_challenge+lift.jpg">
</div>
</div><!--end of main-->
<div class="main-two">
<p id="two-header">Schedule today for a free consultation</p>
<div class="article">
<img class="image" src="http://s3-media2.fl.yelpcdn.com/bphoto/YDLPwsEk_fMXIw9Xwu_8rw/ls.jpg">
</div>
<div class="article">
<img class="image" src="http://image.trucktrend.com/f/tech/1011tr_2004_gmc_sierra_buildup/28770854/1011tr_03+2004_GMC_sierra_buildup+factory_ring_and_pinion.jpg">
</div>
<div class="article">
<img class="image" src="http://aautomotivetx.com/wp-content/uploads/2013/04/Brakes.jpg">
</div>
</div><!--end of main-two-->
<div class="main-three">
<p id="two-header">Guranteed service for 30 days</p>
<div class="article">
<img class="image" src="http://bernalautobodyrepair.com/images/paint_booth.jpg">
</div>
<div class="article">
<img class="image" src="https://www.bkreader.com/wp-content/uploads/2015/06/welding-1.jpg">
</div>
<div class="article">
<img class="image" src="http://cdn.instructables.com/F4Q/QD4F/HHS9SLP0/F4QQD4FHHS9SLP0.LARGE.jpg">
</div>
</div><!--end of main-three-->
<footer class="footer">
<p class="copyright">Schedule now! Call today at (123)456-7890.</p>
<p class="copyright-two">Copyright © All Rights Reserved.</p>
<div class="social-icons">
<img src="http://www.voxlumiere.com/wp-content/uploads/2009/12/facebook-logo-resized-image-50x50.png"/>
<img src="http://www2.actionforchildren.org.uk/media/128162/twitter_50x50.jpg"/>
<img src="http://www.clickondetroit.com/image/view/-/21435108/highRes/1/-/ubsa5pz/-/50x50-Instagram-logo-png.png"/>
</div><!--end of social-icons-->
</footer>
</div><!--end of wrapper-->
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: arial, sans-serif;
color: black;
background-image: url("http://www.theonecar.com/wp-content/uploads/2014/02/car-shops-499.jpg"), url("http://i.ytimg.com/vi/1n5j3sy-Rok/maxresdefault.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
}
.wrapper {
font-size: 1.6em;
margin: 0 auto;
width: 990px;
background-color: white;
/*padding: 2em;*/
}
header {
background-color: white;
height: 50px;
display: block;
width: 100%;
}
header h1 {
float: left;
padding: 5px;
color: rgb(95, 207, 128);
margin-top: 5px;
margin-left: 100px;
font-size: 1.8em;
}
.navlist a {
text-decoration: none;
color: black;
}
.navlist a:hover {
color: white;
background-color: rgb(95, 207, 128);
padding: 15px;
}
.navlist {
float: right;
display: inline-block;
text-align: center;
padding: 15px;
font-size: 1.2em;
}
.main {
min-height: 20px;
background-color: rgb(95, 207, 128);
display: block;
width: 100%;
}
.main p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.image {
min-width: 200px;
min-height: 200px;
max-width: 200px;
max-height: 200px;
}
.main-two {
background-color: #39ADD1;
display: block;
}
.main-two p {
color: white;
font-size: 1.6em;
padding: 50px;
text-align: right;
width: 100%;
}
.main-three {
min-height: 20px;
background-color: #f08c35;
display: block;
width: 100%;
}
.main-three p {
color: white;
font-size: 1.6em;
padding: 50px;
float: left;
width: 100%;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
.article {
display: inline-block;
width: 33%;
padding: 63px;
}
footer {
background-color: #294860;
}
.copyright {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.copyright-two {
text-align: center;
padding: 5px;
color: white;
font-size: 1.4em;
}
.social-icons {
display: inline-block;
padding: 5px;
margin-left: 40.2%;
width: 100%;
}
.social-icons a {
margin-left: 5px;
header {
...
width: 100%;
min-width: 990px;
position: fixed;
left: 0;
}
Demo
You're seeing horizontal scrolling because the site loads in a frame. That shouldn't happen in a full browser window.
you header would need to be outside the wrapper since the wrapper is 990px wide.
make the header width 100% but it needs to either be on the root of the div structure or in another 100% width element.
Because it's inside you're <div class="wrapper"> It's not possible,
Move it above the wrapper and it should work.
<header class="header">
<h1>Automotive Industries</h1>
<ul class="navbar">
<li id="contact" class="navlist">Contact</li>
<li class="navlist">Services</li>
<li class="navlist">About</li>
<li class="navlist">Home</li>
</ul>
</header>
<div class="wrapper">
I want to vertical align four single divs side by side. Each div contains text + image.
For some reason, it's not working. There are some divs which located more higher than the others.
I want it to look like that:
div's container:
DIV DIV DIV DIV
<div id="skills-container" class="full-size-properties">
<h1 class="site-titles">Personal Skills</h1>
<div id="four-rectangles">
<div id="front-end" class="single-skills-rectangle">
<img src="Images/front-end.png" />
<h1>FRONT-END</h1>
<h2>CSS3, HTML5, JavaScript</h2>
</div>
<div id="back-end" class="single-skills-rectangle">
<img src="Images/back-end.png" />
<h1>BACK-END</h1>
<h2>JAVA</h2>
</div>
<div id="design" class="single-skills-rectangle">
<img src="Images/design.png" />
<h1>DESIGN</h1>
<h2>?</h2>
</div>
<div id="photography" class="single-skills-rectangle">
<img src="Images/photography.png" />
<h1>PHOTOGRAPHY</h1>
<h2>Canon and Nikon</h2>
</div>
</div>
</div>
Here is the CSS:
#skills-container {
height: 400px;
background: #F8F8F8 url("../Images/noisy.png");
top: 5px;
}
#four-rectangles {
position: absolute;
top: 60px;
background-color: yellow;
}
.single-skills-rectangle {
background-color: #fff;
width: 200px;
height: 210px;
border: 1px solid #CBCBCB;
border-radius: 10px;
display: inline-block;
margin-left: 25px;
text-align: center;
}
.single-skills-rectangle h1 {
font-size: 20px;
font-weight: 700;
color: #06557c;
margin-top: 35px;
}
.single-skills-rectangle img {
margin-top: 30px;
}
.single-skills-rectangle h2 {
font-size: 15px;
color: #808080;
margin-top: 7px;
}
Just add vertical-align: top to the .single-skills-rectangle class.
body {
margin: 0;
}
#skills-container {
height: 400px;
background: #F8F8F8 url("../Images/noisy.png");
top: 5px;
}
#four-rectangles {
position: absolute;
top: 60px;
background-color: yellow;
}
.single-skills-rectangle {
background-color: #fff;
width: 120px;
height: 210px;
border: 1px solid #CBCBCB;
border-radius: 10px;
display: inline-block;
margin-left: 15px;
text-align: center;
vertical-align: top;
}
.single-skills-rectangle h1 {
font-size: 14px;
font-weight: 700;
color: #06557c;
margin-top: 35px;
}
.single-skills-rectangle img {
margin-top: 30px;
}
.single-skills-rectangle h2 {
font-size: 12px;
color: #808080;
margin-top: 7px;
}
<div id="skills-container" class="full-size-properties">
<h1 class="site-titles">Personal Skills</h1>
<div id="four-rectangles">
<div id="front-end" class="single-skills-rectangle">
<img src="http://lorempixel.com/70/70/city" />
<h1>FRONT-END</h1>
<h2>CSS3, HTML5, JavaScript</h2>
</div>
<div id="back-end" class="single-skills-rectangle">
<img src="http://lorempixel.com/80/80/city" />
<h1>BACK-END</h1>
<h2>JAVA</h2>
</div>
<div id="design" class="single-skills-rectangle">
<img src="http://lorempixel.com/60/60/city" />
<h1>DESIGN</h1>
<h2>?</h2>
</div>
<div id="photography" class="single-skills-rectangle">
<img src="http://lorempixel.com/50/50/city" />
<h1>PHOTOGRAPHY</h1>
<h2>Canon and Nikon</h2>
</div>
</div>
</div>
One solution is to use a default width for all your images regardless of the size of each image:
.single-skills-rectangle img {
width: 100px;
}
Code snippet
#skills-container {
height: 400px;
background: #F8F8F8 url("../Images/noisy.png");
top: 5px;
}
#four-rectangles {
position: absolute;
top: 60px;
background-color: yellow;
}
.single-skills-rectangle {
background-color: #fff;
width: 200px;
height: 210px;
border: 1px solid #CBCBCB;
border-radius: 10px;
display: inline-block;
margin-left: 25px;
text-align: center;
}
.single-skills-rectangle h1 {
font-size: 20px;
font-weight: 700;
color: #06557c;
margin-top: 35px;
}
.single-skills-rectangle img {
margin-top: 30px;
}
.single-skills-rectangle h2 {
font-size: 15px;
color: #808080;
margin-top: 7px;
}
.single-skills-rectangle img {
width: 100px;/*add a default image width*/
}
<div id="skills-container" class="full-size-properties">
<h1 class="site-titles">Personal Skills</h1>
<div id="four-rectangles">
<div id="front-end" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>FRONT-END</h1>
<h2>CSS3, HTML5, JavaScript</h2>
</div>
<div id="back-end" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>BACK-END</h1>
<h2>JAVA</h2>
</div>
<div id="design" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>DESIGN</h1>
<h2>?</h2>
</div>
<div id="photography" class="single-skills-rectangle">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/96/Google_web_search.png" />
<h1>PHOTOGRAPHY</h1>
<h2>Canon and Nikon</h2>
</div>
</div>
</div>