I am attempting to recreate this simple website layout:Website image
Within the header tag, I am having trouble lining up the logo image with the green image with the slogan on it, shown here: failed attempt.
Here is the code I have for that area:
header {
overflow: hidden;
}
.container {
width: 780px;
margin-left: auto;
margin-right: auto;
}
.logo {
width: 347px;
margin-left: auto;
margin-right: auto;
}
.slogan {
background-image: url(images/header-vet.jpg);
padding: 15px;
float: left;
}
Here is the HTML:
<header>
<div class="header_img">
<img src="images/main-logo.jpg" alt="Vetinfo logo">
</div>
<div class="slogan">
Welcome to VetInfo
</div>
</header>
You can use flexbox for that:
header {
overflow: hidden;
display: flex;
flex-flow: row;
}
.container {
width: 780px;
margin-left: auto;
margin-right: auto;
}
.logo {
width: 347px;
margin-left: auto;
margin-right: auto;
}
.slogan {
background-image: url(images/header-vet.jpg);
padding: 15px;
}
<header>
<div class="header_img">
<img src="images/main-logo.jpg" alt="Vetinfo logo">
</div>
<div class="slogan">
Welcome to VetInfo
</div>
</header>
Related
When I resize the browser, the images overlap with the video, and I don't want the to overlap. I want them to stay in position when I resize the browser.
iframe {
display: block;
margin: 0 auto;
margin-top: 60px;
}
.png1 img {
display: inline-block;
max-width: 100%;
height: auto;
margin: -430px 210px 850px;
}
.png2 img{
display: inline-block;
max-width: 100%;
height: auto;
float: right;
position: relative;
top: -85.100em;
right: 150px;
}
<div class="video">
<iframe width="600" height="415" src="https://www.youtube.com/embed/c9Qg7vm0lSk" frameborder="0" fullscreen></iframe>
</div>
<div class="png1">
<img src="https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/2016/03/Adventure-Boy-Featured-Game-Art.png">
</div>
<div class="png2">
<img src="http://gameartpartnersimagehost.s3.amazonaws.com/wp-content/uploads/2016/07/royalty-free-game-art-commando-thumbnail0003.png">
</div>
You should learn Media queries as well, it will be helpful. Resize window to see the image move down.
Desktop
Mobile
.col {
color: #fff;
float: left;
margin: 2%;
width: 46%;
}
.one {
background-color: none;
}
.two {
background-color: none;
}
#media screen and (max-width: 600px) {
.col {
float: none;
margin: 0;
width: 100%;
}
}
iframe {
display: block;
margin: 0 auto;
margin-top: 60px;
}
<div id="container">
<div class="row">
<div class="video">
<iframe width="600" height="415" src="https://www.youtube.com/embed/c9Qg7vm0lSk" frameborder="0" fullscreen></iframe>
</div>
<div class="col one">
<img src="https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/2016/03/Adventure-Boy-Featured-Game-Art.png">
</div>
<div class="col two">
<img src="http://gameartpartnersimagehost.s3.amazonaws.com/wp-content/uploads/2016/07/royalty-free-game-art-commando-thumbnail0003.png">
</div>
</div>
</div>
Because for .png1 img you are using margin as negetive values and for .png2 img you are using top value relativly to that image.Try removing those properties , you will get line by line
iframe {
display: block;
margin: 0 auto;
margin-top: 60px;
max-width: 100%;
}
.video,.png2,.png1 {
float: left;
width: 33%;
}
.png1 img {
max-width: 100%;
height: auto;
}
.png2 img{
display: inline-block;
max-width: 100%;
height: auto;
}
I'm trying to layout my first site and I'm stuck on positioning two divs in the same line. I have posted an image below showing the layout I am trying to achieve.
This is the code that i have for the 2 divs at the moment.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<ul class="social-icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitter.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address to go here</p>
</div>
</div>
I have been playing around with the CSS for a little while but just can't seem to get it right.
What I am looking to do is have all the above on one row, with the nav on the row underneath. Hope that makes sense. I am not using any framework like bootstrap so just using my own classes etc.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: #fff;
position: relative;
}
.logo {
width: 300px;
height: auto;
position: relative;
display: inline-block;
}
.logo img {
width: 100%;
height: auto;
}
.social {
display: inline-block;
float: right;
margin-right: 20%;
}
.social li {
display: inline-block;
}
.social li img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
You need to create more containers for your div's. Here is a very basic example to explain:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title></title>
</head>
<body>
<div class="container">
<div id="one"></div>
<div id="two">
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
The container class would take up the full width of the page and contain everything above your navbar. Div one would be your logo, than div two would be another container in which you could put more divs (three and four) that take up a percentage of the height of div two. Than inside of one of these divs, you would need put your social logos, and the address in the next one so it shows underneath. Here is the CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
width: 100%;
}
#one {
height: 300px;
width: 300px;
background-color: green;
float: left;
margin-left: 25%;
}
#two {
height: 300px;
width: 500px;
float: left;
margin-left: 10%;
}
#three {
height: 30%;
width: 100%;
background-color: yellow;
}
#four {
height: 70%;
width: 100%;
background-color: blue;
}
This is just a very basic example, only to be used as a concept for your idea. Obviously remove the cheesy background colors and modify
Updated:
I created a div with the class .top that has a defined width, which allows you to center anything within it with margin:auto;. I created a section around your social icons and floated it right. This is a better example than my previous one because here the logo is centered.
I hope this helps: https://jsfiddle.net/0sptpx0j/3/
Hi guys thanks for all the advice, i decided after reading about absolute positioning to go down that route. this is what i have come up with.
<div class="full-width">
<div class="logo">
<img src="img/logo.png"/>
</div>
<div class="social">
<div class="social-list">
<ul class="icons">
<li><img src="img/facebookSS.png"/></li>
<li><img src="img/twitterSS.png"/></li>
<li><img src="img/instagramSS.png"/></li>
</ul>
</div>
<div class="address">
<p>Address goes in here</p>
</div>
</div>
</div>
.logo {
width: 300px;
height: auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.logo img{
width: 100%;
height: auto;
}
.social {
float: right;
width: 300px;
}
.social-list {
width: 100%;
}
.icons {
list-style: none;
padding: 0;
}
.icons li {
display: inline-block;
margin-right: 10px;
}
.icons img {
width: 50px;
height: auto;
}
.full-width {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
}
I have a portfolio website and I'm trying to align the pictures in the center of the page. I've tried
text-align
and
margin
but nothing seems to work. The code and CSS are as follows:
<div class="body">
<div class=responsive>
<div class=image>
<img class="gallery" src="../pics/placeholder.png">
<p></p>
</div>
</div>
and
.body {
text-align: center;
padding-top: 20px;
float: left;
}
.responsive {
padding: 5px;
float: left
}
.gallery {
width: 250px;
height: 250px;
}
Remove float:left from .responsive and add width:100% to .body
Then you don't need float on .body also.
But it all depends how you want to design your page.
Right now the float: left without the set width is messing up your ability to center things.
Are you looking for something like this?
.body {
padding-top: 20px;
float: left;
width: 100%;
}
.responsive {
padding: 5px;
float: left;
width: 100%;
}
.image {
margin: 0 auto;
width: 250px;
}
.gallery {
width: 100%;
height: auto;
}
<div class="body">
<div class="responsive">
<div class="image">
<img class="gallery" src="https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-shop-02.jpg">
<p></p>
</div>
</div>
</div>
I put my div id="banner" and style it to give the color that matches the image but the color doesn't display. So, what should I do?
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
Since #cloud (the child of #banner) is floated, #banner essentially collapses and it acts like it doesn't have content. You can remedy this by adding overflow:auto to #banner.
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
overflow: auto;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
Simply give #banner some height. See the snippet.
#banner {
background-color: #78c8f0;
height: 40px;
}
Snippet
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 30px;
padding-right: 30px;
text-align: center;
}
#banner {
background-color: #78c8f0;
height: 40px;
}
<div id="page">
<div id="banner">
<div id="cloud">
<img src="Cloud4.gif" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
</div>
<!--page-->
See this fiddle
Th background colour was not shown because, the element which contained the content was floated and thus the other elements were such that it doesnt even exist. thus,
Either change your css for #banner as follows
#banner {
float: left;
background-color: #78c8f0;
}
OR
change your css for #cloud as follows
#cloud {
/* float: left; */
padding: 0px;
margin: 0px;
}
I got problem with centering the div #offer within the section .tight. I don't want to use position: absolute; because of possibility of correct displaying site in 1024px width screens.
Here's the HTML:
<section class="main">
<section class="tight">
<div id="offers">
<article class="offer">
<div id="offer_stats"></div>
text
</article>
<article class="offer">
<div id="offer_comp"></div>
text
</article>
<article class="offer last">
<div id="offer_time"></div>
text
</article>
</div>
</section>
</section>
And the CSS:
section.main {
min-width: 880px;
max-width: 1200px;
margin: 0 auto;
}
section.tight {
width: 100%;
margin: 0 auto;
float: left;
}
#offers {
float: left;
padding-bottom: 100px;
text-align: center;
}
article.offer {
float: left;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
article.offer.last {
padding-right: 0;
}
article.offer div {
height: 178px;
}
#offer_stats {
background: url("../images/offer_stats.png") no-repeat;
}
#offer_comp {
background: url("../images/offer_comp.png") no-repeat;
}
#offer_time {
background: url("../images/offer_time.png") no-repeat;
}
The printscreen:
Any suggestions?
section.main {
width: 880px;
max-width: 1200px;
margin: 0 auto;
}
First, i suggest you to remove float: left; from #offers
#offers {
padding-bottom: 100px;
text-align: center;
}
Second, i suggest you to use display: inline-block; instead of float: left; in article.offer
article.offer {
display: inline-block;
min-height: 178px;
width: 260px;
color: #59535e;
padding-right: 50px;
}
See this jsfiddle