Im using carousel on my website, and it's somehow not aligned with row, but is instead margined like 40px to the right
I've tried using margin:0, margin-left:0, but nothing works.
Also everytime it scrolls through next images, it gets thrown out of a row for some reason.
Any help?
my html code
<div class="container">
<div class="row">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<img src="random img" alt="">
</div>
<div class="caption">
<h4>random caption</h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
my css code
img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
#media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
Add this CSS Rule:
ul.thumbnails {
padding:0;
}
hope this helps...
Use :
body {
margin:0;
}
.thumbnails {
padding: 0;
}
Related
I need help with my grid layout for a free code camp project.
Basically, I'd like to show 3 of my portfolio pages in a row. I setup a grid layout for this and can't seem to get the middle page to lineup with the others. Also, as I am brand new, feel free to give feedback on what I have so far in general.
here is the link to the codepen just in case https://codepen.io/eddiepearson/pen/xMaaYX
* {
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400');
}
html, body {
margin: 0;
padding: 0;
}
nav ul {
text-align: right;
position: fixed;
margin-top: 0;
width: 100%;
background-color: #002171;
}
nav ul li {
display: inline-block;
margin: 55px;
margin-bottom: 15px;
margin-top: 30px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
#media only screen and (max-width: 500px) {
nav ul {
text-align: left;
height: 75px;
}
nav ul li {
margin: 20px;
height: 5px;
}
}
.intro {
top: 0;
background: #002171;
min-height: 55vh;
padding-top: 45vh;
}
.intro p {
text-align: center;
color: #fff;
}
.intro h1 {
text-align: center;
color: #fff;
}
.work {
margin-top: 50px;
}
.work-header {
text-align: center;
}
#projects {
display: grid;
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
justify-content: space-evenly;
}
#third-p {
}
.project-pic {
width: 100%;
}
.project-title {
text-align: center;
}
<nav>
<ul style="list-style-type: none" id="navbar">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
<section>
<div id="welcome-section" class="intro">
<h1>Hey i'am eddie</h1>
<p>a web dev with a focus on UX</p>
</div>
</section>
<section>
<h2 class="work-header">These are some of my projects.</h2>
<div id="projects" class="work">
<div id="first-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="second-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
<div id="third-p">
<a href="https://codepen.io/eddiepearson/pen/vbxQEp" target="_blank" class="project project-box">
<img class="project-pic" src="https://previews.dropbox.com/p/thumb/AAU0aRvU53Ban4nVNY5N70nno6nDVvhkDsD0qSzP0NYsVh20CPfm-jFQB4GrArV09A9eVa8YUpJqpQJDdBaHnyJ24GAfLey4u1qdJZ5gp2JY4WF-DkfnXfIawSA8n7jronkkUR_mT9xH5sFDTm0jagwpWpM93tn_zZs8c62-3c9fAQKvFmvjqyOjFenQsBgK5XUG62avpwvwjGtSf0IWMiXUrXUWhJIl2wFc3L4UK4z-Hw/p.png?size_mode=5" alt="project-pic">
<div class="project-title">
Tribute Page
</div>
</div>
</a>
</div>
</section>
First, you have a small issue (typo I assume) here in the CSS
grid-template-columns: 300px 300px 300px;
grid-row-columns: 300px 300px;
Shouldn't that last part be grid-template-rows?
Also you could use this to manually control each element in the grid:
#first-p {
grid-row:1;
grid-column:3;
}
I am trying to remove white space between Navigation bar and the carousel in Bootstrap. I've found a lots of answer but none worked for me. Please take a look at the my code if I am doing anything wrong.
jsp for carousel
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="3000" id="bs-carousel">
<div class="overlay"></div>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
css file
.fade-carousel {
position: relative;
height: 100vh;
padding-top: 0px;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
.navbar {
margin-bottom: 0px;
}
/* Responsiveness of the link bar */
#media ( min-width : 767px) {
.navbar-default .navbar-nav>li>a {
color: #4e0300;
}
.navbar-nav>li.dropdown.open>a {
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
min-width: 100%;
}
}
Have you tried applying negative padding/margin?
padding: -5px;
I'm displaying images of A4, A5, Quarto etc sized products in a responsive grid and and using max-width: 70%; (and other percent values) am able to take arbitrarily sized images and display them in correct scale. This is working well in about 10 browser/OS combos - except Win 10/IE11
Good display:
Here each cell in the grid (<div class="product">) has a black outline and contains an image wrapper in red (<div class='productimage'>) plus other wrapper divs the the text and price. Using a jquery solution here I have made all the grid cells the same height.
In IE11 the images seem to refuse to scale and want to render full size instead of a percent of their container's width:
Removing display: table-cell; from the .productimage class that wraps the image gives this on IE11:
So size is now correct again, but image is at top of the div. I tried this and similar solutions based on position: relative / position: absolute but cannot get it to work, as, I think, my divs do not have a fixed height, and/or height is set by jquery.
Codepen
http://codepen.io/anon/pen/ENNvbZ
function equalize() {
var $maxImgHeight = 0;
var $maxTxtHeight = 0;
$('.productrow .productimage').each(function(i) {
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i) {
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
displayWindowSize();
}
function equalizeOnResize() {
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin: 0px;
}
.centered_content {
max-width: 1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.quarto_diary_image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.pocket_diary_image {
max-width: 40%;
margin-left: auto;
margin-right: auto;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding: 10px 20px;
margin: 0px;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
#media (min-width: 500px) and (max-width: 799px) {
.product {
width: 50%;
}
.product:nth-child(2n+1) {
clear: left;
}
}
#media (min-width: 800px) and (max-width: 999px) {
.product {
width: 33.3%;
}
.product:nth-child(3n+1) {
clear: left;
}
}
#media (min-width: 1000px) {
.product {
width: 25%;
}
.product:nth-child(4n+1) {
clear: left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding: 4px;
}
/*
display: table-cell; seems to be causing IE problem, when removed
the image are displayed at the correct size and within the DIVs, but
not aligned to the bottom
*/
.productimage {
display: table-cell;
text-align: center;
vertical-align: bottom;
height: 100%;
outline: 1px dashed red;
}
.product_todetails {
outline: 0px solid black;
display: table;
width: 100%;
padding: 4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {
background-color: #444;
border: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
</div>
<!-- / nth-child wrapper -->
</div>
<!-- / panel-body -->
</div>
<!-- / panel -->
You could use flexbox instead. More suitable for layout than display: table/table-cell
Note, you need to add prefixed flexbox property for amongst other IE10
Updated/Added CSS rules
.productimage {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
outline : 1px dashed red;
}
.productimage a {
flex: 0 0 auto;
margin-top: auto;
}
Sample snippet
function equalize(){
var $maxImgHeight =0;
var $maxTxtHeight =0;
$('.productrow .productimage').each(function(i){
if ($(this).height() > $maxImgHeight) {
$maxImgHeight = $(this).height();
}
});
$(".productrow .productimage").height($maxImgHeight);
$('.productrow .producttitle').each(function(i){
if ($(this).height() > $maxTxtHeight) {
$maxTxtHeight = $(this).height();
}
});
$(".productrow .producttitle").height($maxTxtHeight);
//displayWindowSize();
}
function equalizeOnResize (){
$(".productrow .productimage").height('auto');
$(".productrow .producttitle").height('auto');
equalize();
}
window.onresize = equalizeOnResize;
window.onload = equalize;
* {
margin: 0;
padding: 0;
-webkit-padding-start: 0;
}
body {
color: #444444;
font-size: 16px;
font-family: Arial;
margin:0px;
}
.centered_content {
max-width:1100px;
margin: auto;
}
/*
scale images to relative paper sizes
*/
.a4_diary_image {
max-width: 100%;
}
.quarto_diary_image {
max-width: 100%;
}
.a5_diary_image {
max-width: 70%;
}
.a6_diary_image {
max-width: 50%;
}
.pocket_diary_image {
max-width: 40%;
}
/*
responsive grid for product categories - show 1,2,3 or 4 products
per row depending on screen size. first .product is mobile - rest
need to have a clear inserted into start of each new row so boxes line up evenly
*/
.product {
background-color: white;
padding:10px 20px ;
float: left;
width: 100%;
outline: 1px dashed black;
margin-bottom: 20px;
}
#media (min-width: 500px) and (max-width: 799px) {
.product {width: 50%;}
.product:nth-child(2n+1){
clear:left;
}
}
#media (min-width: 800px) and (max-width: 999px){
.product {width: 33.3%;}
.product:nth-child(3n+1){
clear:left;
}
}
#media (min-width: 1000px) {
.product {width: 25%;}
.product:nth-child(4n+1){
clear:left;
}
}
/*
detailied styling of each .product
*/
.producttitle {
padding:4px;
}
/* ***************************************
used flexbox here instead of table-cell
*/
.productimage {
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
outline : 1px dashed red;
}
.productimage a {
flex: 0 0 auto;
margin-top: auto;
}
/* ***************************************
*/
.product_todetails {
outline: 0px solid black;
display:table;
width: 100%;
padding:4px;
border-top: 1px dashed #000080;
}
.productprice {
display: table-cell;
font-size: 24px;
vertical-align: middle;
color: #000080;
}
.productmoredetails {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.productmoredetails .btn-primary {background-color: #444;border:black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default ">
<div class="panel-body">
<div class="productrow">
<!-- nth-child wrapper -->
<div class="product">
<div class='productimage'>
<a href='a4ultra_detail.php'>
<img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='a4ultra_detail.php'>A4 </a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>A5</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Quarto</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
<div class="product">
<div class='productimage'>
<a href='#'>
<img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
</a>
</div>
<div class='producttitle'>
<a href='#'>Pocket</a>
</div>
<div class='product_todetails'>
<div class='productprice'>
€10.00
</div>
<div class='productmoredetails'>
More info / buy
</div>
</div>
</div>
</div>
<!-- / nth-child wrapper -->
</div>
<!-- / panel-body -->
</div>
<!-- / panel -->
Tables are so problematic. The cells are forced to be at least as big as the contents, but if you use percentages in the contents then it's a circular definition.
So CSS2.1 left lots of these things as undefined behavior, and therefore browsers behave differently. Now CSS Tables Module 3 is attempting to fix this but it's not stable yet.
What usually works for me is:
Position the cells relatively
Position the contents absolutely
Use top, right, bottom and left to size and place the contents as desired inside the cell.
We have a "As Seen On" press column on desktop near the footer. On desktop it works properly and the logos are all centered on one line. However, it does the same for mobile and on mobile I need the logos to be stacked instead of all one one line so you don't scroll all the way to the right on your phone or tablet.
I'm not 100% sure but I think I need a media query but I am kinda new to formatting CSS.
HTML:
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<br>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" /></a>
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" /></a>
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" /></a>
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" /></a>
</div>
<span class="sr-only">Four</span>
</li><li>
</ul>
</div>
CSS:
ul.press {
display: table;
width: 100%;
text-align: center;
}
ul.press > li {
display: table-cell;
}
Thanks
What you're looking for can be easily achieved with a few lines of CSS. You can view the CSS I've created (and documented) in this JSFiddle: https://jsfiddle.net/8oLxr7ke/
.press {
display: block; /* Remove bullet points; allow greater control of positioning */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
}
.press li {
display: inline-block; /* Get all images to show in a row */
width: 25%; /* Show 4 logos per row */
text-align: center; /* Centre align the images */
}
#media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
#media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" />
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" />
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" />
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Four</span>
</li><li>
</ul>
</div>
In essence, what my code does is:
Set up a rudimentary grid system
Show four logos on large screens
Show two logos on medium screens
Show only one logo on small screens
If you don't want to be restricted to showing a set number of logos, you could do the following:
View on JSFiddle https://jsfiddle.net/5m0whf3k/
.press {
display: table; /* Required for table-cell to work on li's */
padding: 0; /* Override defaults for lists */
margin: 0; /* Override defaults for lists */
width: 100%; /* Get the row full width */
text-align: center; /* Centre align grid items */
}
.press li {
display: table-cell; /* Get all images to show in a row */
text-align: center; /* Centre align the images */
}
#media (max-width: 960px) and (min-width: 501px) {
.press li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
#media (max-width: 500px) {
.press li { width: 100%; } /* On small screens, show one logo per row */
}
#media (max-width: 960px) {
.press {
display: block;
}
.press li {
display: inline-block;
}
}
<div class='clearfix'></div>
<div class='center' style = "margin-top:3%; margin-bottom:5%">
<h2 class="page-header text-center">As Seen On</h2>
<ul class="press">
<li>
<div class="press-logo">
<img alt="One" src="" />
</div>
<span class="sr-only">One</span>
</li><li>
<div class="press-logo">
<img alt="Two" src="" />
</div>
<span class="sr-only">Two</span>
</li><li>
<div class="press-logo">
<img alt="Three" src="" />
</div>
<span class="sr-only">Three</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Four</span>
</li><li>
<div class="press-logo">
<img alt="Four" src="" />
</div>
<span class="sr-only">Five</span>
</li>
</ul>
</div>
Important note:
In your HTML code there were closing </a> tags after the <img> tags but no opening <a> tags - this is invalid code. In my example I have removed those for you.
Also, you shouldn't need the <br> between the <h2> and the <ul class="press"> as the press list will be full width and on its own row thanks to the display: block;.
Try adjusting your viewport, if the problem persists, then opt in for media queries
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("header1").classList.toggle("relative");
document.getElementById("button_icon").classList.toggle("change_icon");
}
.wrap{
min-height: calc( 100vh - 86px );
}
a{
text-decoration: none;
color: #666666;
}
header{
text-align: center;
}
header div ul{
}
#first_h1{
color: #000000;
float: left;
margin: 10px 0;
}
#slider{
text-align: center;
border: 1px solid #34c489;
background: linear-gradient(to top, #34c489, rgba(52, 196, 137, 0.30), rgba(52, 196, 137, 0)), url("../img/england_landscape_2-wallpaper-2880x1620.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.boxing{
max-width: 70%;
margin: 0 auto;
}
#img_of_slider{
padding: 0;
margin: 0;
width: 100px;
padding-top: 20px;
}
div header div ul li{
font-size: 1em;
}
/*==================*/
.dropbtn {
color: white;
padding: 16px;
border: none;
height: 56px;
width: 56px;
background-position: center;
background-size: 60%;
background-color: black;
background-repeat: no-repeat;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.5em;
}
.dropdown-content li{
padding: 5px 0;
}
.dropdown-content li a{
color: #fff;
}
.dropdown-content li:hover{
background-color: rgba(64, 247, 171, 0.36);
}
.show {
display: inline;
width: 100%;
position: absolute;
left: 0;
top: 56px;
background-color: #34c489;
}
.relative{
position: relative;
}
.change_icon{
background-position: center;
background-size: 60%;
background-color: green;
background-repeat: no-repeat;
}
#media screen and (min-width: 680px) {
#first_h1{
float: left;
padding-left: 40px;
color: #000000;
margin: 10px 0;
}
.dropdown-content li{
display: inline-block;
padding-right: 20px;
font-size: 1em;
margin: 10px 0;
}
.dropdown-content li a{
color: #000000;
}
.float{
float: left;
width: 28%;
padding: 2%;
}
.clear_fix::after{
content: "";
display: table;
clear: both;
}
#img_of_slider{
width: 250px;
}
.dropbtn{
display: none;
}
.dropdown-content{
display: block;
float: right;
padding-right: 50px;
margin: 0;
}
.dropdown-content li:hover{
background-color: transparent;
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normaliz.css"/>
<link rel="stylesheet" href="css/about.css"/>
<title>Best city guide | Baneh</title>
</head>
<body>
<div class="wrap">
<header id="header1">
<div class="clear_fix boxing">
<h1 id="first_h1">city</h1>
<div class="dropdown">
<button onclick="myFunction()" id="button_icon" class="dropbtn"></button>
<ul id="myDropdown" class="dropdown-content">
<li>home</li>
<li class="active">about</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
</div>
<div style="clear: both"></div>
<div id="slider">
<img id="img_of_slider" src="img/manager.png" alt="city icon"/>
<h1>Best City Guide</h1>
<h3>city</h3>
</div>
</header>
</div>
</body>
</html>
When i do my web design, meet a problem when i need to do
[LEFT LOGO] then [TITLE(CENTER)] then [RIGHT LOGO]
The problem appear at RIGHT LOGO there, it doesn't align with LEFT LOGO.
The right logo is under the line of TITLE(CENTER)
here is my code sample, thanks:
<div class="navigation">
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
css:
.navigation{
height:auto;
background-color:#666;
width:85%;
margin:auto;
min-width:800px;
}
#title{
text-align:center;
margin: auto;
font-family:‘Arial Black’, Gadget, sans-serif;
font-size: 20px;
color: #FFF;
}
#left {
float: left;text-align:left;
margin: auto;
}
#right {
float: right;text-align:right;
margin: auto;
}
a img { border: 0; }
simply move the right container above the left container check below
<div class="navigation">
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
</div>
I thing its work an another way i have some changes in style width depends of logo width. if it is not set in center then change the width %.
#title{
text-align:center;
margin: auto;
font-family:'Arial Black', Gadget, sans-serif;
font-size: 20px;
color: #FFF;
width:59%;
float:left;
}
.clear {
clear:both;
margin:0px;
font-size:0px;
}
and add a div after the last div with class clear.
<div id="right"> .... </div>
<div class="clear"> </div>
You could also display your divs as a table and table-cells, like this:
HTML
<div class="navigation">
<div id="left">
left
</div>
<div id="title">
title
</div>
<div id="right">
right
</div>
</div>
CSS
.navigation {
width: 100%;
display: table;
table-layout: fixed;
}
.navigation > div {
display: table-cell;
}
.navigation div:nth-child(1) {
background: lightgray;
}
.navigation div:nth-child(2) {
background: gray;
text-align: center;
}
.navigation div:nth-child(3) {
background: lightgray;
text-align: right;
}
Also check the JSFiddle Demo