HTML
<div id="main_page">
<div class="row d-flex align-items-center">
<div class="d-inline-block col-md-4 cuisine_slogan">
<h2>Enjoy different cuisines around the world!</h2>
</div>
<div class="d-inline-block col-md-4 padding-0 pict01">
<img src="different_cuisines.png" alt="cuisines_picture01" width="630" height="600">
</div>
<div class="d-inline-block col-md-4 padding-0 pict02">
<img src="different_cuisines02.png" alt="cuisines_picture02" width="600" height="600">
</div>
</div>
</div>
CSS
body {
padding-top: 60px;
margin: 0;
overflow-x: hidden;
}
#main_page {
padding-top:20px;
}
#main_page h2{
float:left;
}
.cuisine_slogan{
height:600px;
background-color:greenyellow;
}
.cuisine_slogan h2{
padding-top:150px;
padding-left:30px;
font-size:80px;
text-align:center;
}
.row{
padding:0;
margin-right: 0;
}
img{
margin-right: 0;
margin-left:0;
}
I tried to use margin-left:0; and margin-right:0; on the img part but when I refresh the html page it still contains white spaces between images and the green box. May I ask is there a method to make the green box stick with the images without any white spaces on the row including the leftmost and rightmost?
I think you are using bootstrap, so you can add inline padding-left:0; to columns
.padding-0 {
padding-left: 0 !important;
}
Related
<div class="wrapper" style="border-bottom: 2px solid black;text-align:center;">
<div class="left" style="float:left;">
<img class="styleLogo" src="ss.png">
</div>
<div class="right" style="float:right;">
<a href="home.html">
<img class="styleHome" src="home.png"></a>
</div>
<div class="center" style="text-align:left; margin:0 auto !important; display:inline-block">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyy</h5>
</div>
</div>
This is the code i tried.pls help.i want to make ss.png float to right and home.png float to left and the headings shouls be in the exact center of div with wrapper class.
Using the "float" method:
If you want the center element to ignore the left and right elements and be centered in the viewport regardless of the sizes of the left and right elements, you will need to position the center absolutely to the wrapper (or use javascript to find the widths of left and right and set margins accordingly). See this fiddle
.wrapper {
position: relative;
width: 100%;
border-bottom: 2px solid black;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
width: 100%;
margin: 0 auto;
}
.center > h2, .center > h5 {
margin: 0 auto;
}
.clearfloats {
clear: both;
}
<div class="wrapper">
<div class="left">
<img class="styleLogo" src="https://dummyimage.com/170x170">
</div>
<div class="right">
<a href="home.html">
<img class="styleHome" src="https://dummyimage.com/50x45"></a>
</div>
<div class="center">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyyyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyyyyyyyy</h5>
</div>
<div class="clearfloats"></div>
</div>
To place the right image at the bottom right of the wrapper you could position it absolutely instead of floating it. Just change the .right class like this:
.right {
position: absolute;
right: 0;
bottom: 0;
}
Using the "CSS Grid" method:
You can eliminate floats and absolute positioning. There are all kinds of options for positioning within the grid. See this jsFiddle
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 2px solid black;
text-align: center;
}
.left {
justify-self: start;
}
.center {
align-self: center;
}
.right {
align-self: end;
justify-self: end;
}
.center > h2,
.center > h5 {
margin: 0 auto;
}
<div class="wrapper">
<div class="left">
<img class="styleLogo" src="https://dummyimage.com/170x170">
</div>
<div class="center">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyyyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyyyyyyyy</h5>
</div>
<div class="right">
<a href="home.html">
<img class="styleHome" src="https://dummyimage.com/50x45"></a>
</div>
</div>
<div class="wrapper" style="border-bottom: 2px solid black;text-align:center;">
<div class="flex" style="display:flex;flex-direction:row;justify-content:center;justify-content:space-between;">
<img class="styleLogo" src="ss.png">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyy</h5>
<img class="styleLogo" src="ss.png">
</div>
</div>
</div>
</div>
</div>
You can make this kind of structure simply using CSS flexbox, just make the div element with class wrapper flexbox and then use the appropriate rules to align your content in it, for example first place the elements in the order you wish them to appear on webpage
<div class="wrapper">
<div class="left">
<img class="styleLogo" src="https://dummyimage.com/300.png/09f/fff">
</div>
<div class="center">
<h2 class="heading1">ss</h2>
<h2 class="heading2">yyyy</h2>
<h5 class="subHeading1">jjjjjj</h5>
<h5 class="subHeading2">yyyyyy</h5>
</div>
<div class="right">
<a href="home.html">
<img class="styleHome" src="https://dummyimage.com/300.png/09f/fff"></a>
</div>
</div>
Then use this CSS to adjust the content according to your need
.wrapper {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
border:1px solid #000;
align-items:center;
text-align:center;
}
.left img,
.right img {
width:100%;
}
.center {
min-width:33.33%;
}
You can alter the width of your left, right and center divs according to your wish or accommodate the content, and if you want your content to be centered vertically also then just add one new rule to wrapper div align-items:center;
If you are not familiar with the concept of flexbox then you can visit this resource for more information https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Edit: as per your requirement to make the center div to stay at exact center irrespective of the size and placement of the divs on sides you can use position:absolute; on center div like below:
.wrapper{
display:flex;
justify-content:space-between;
border:1px solid #000;
align-items:center;
text-align:center;
position:relative;
overflow:hidden;
}
.right{
margin-top:auto;
}
.right img{
width:50px;
height:45px;
display:block;
}
.left img{
width:170px;
height:170px;
display:block;
}
.center{
min-width:33.33%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid red;
}
Hope it helps!
I wouuld like to make the logo appear larger and centered above the navbar. Any help will be greatly appreciated.
Here's the code: https://jsfiddle.net/ou51rksb/1/
<body class="home">
<!-- wrapper -->
<div id="wrapper" class="win-min-height">
<header id="block01g" class="header block background01" zp-module="Header">
<div class="container header_block">
<a class="navbar-brand" href="#">
<img class="blacklogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
<img class="whitelogo img-responsive" src="images/logob.png" alt="Bañuelos Refrigeration Services">
</a>
</div>
</header>
</div>
</body>
Use position:absolute; for navbar-brand. Add this to your css:
.header_block{
position:relative;
padding:0;
padding-top:45px;
}
.navbar-brand{
position:absolute;
top:0;
left:50%;
height:70px;
transform:translate(-50%,0);
}
.navbar-brand img{
height:100%;
margin:0 auto;
display:block;
margin-bottom:100px;
}
Here's a fiddle. You have set some padding at the top of your body. which you can remove. that will get your logo aligned to the top.
Please replace this css
#block01g .navbar-brand {
display: block;
float: inherit;
margin: 0 auto;
padding-bottom: 0;
padding-right: 0;
text-align: center;
width: auto;//you add width for logo
}
try with this i have centered your logo simply , is this what you need ?
.navbar-brand {
display: block;
float: none;
font-size: 18px;
height: auto;
margin: 0 auto;
}
http://jsfiddle.net/ou51rksb/12/
I am making a webpage in which I want to make 2 image thumbnails appear adjacent to each other with same height.
Consider my html code:
<div class="row">
<div class="col-md-6">
<img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" width="640px" height="480px">
</div>
<div class="col-md-6">
<img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" width="640px" height="480px">
</div>
</div>
Corresponding to the given code in the output it shows(this is just a cropimage of the output) :
I cant see why the height attribute doesnt assign same height to both the images
As asked in one of the answers here is the css file:
body{
background-color: rgb(45,45,45);
}
.page-header{
height: 100px;
background-color: rgb(17, 17, 17);
margin-top: 0px;
margin-bottom: 0px;
}
#title{
font-size:400%;
color: white;
font-family: 'Oswald', sans-serif;
}
.nav-button{
margin-top:24px;
margin-right:50px;
margin-left:50px;
width:110px;
height:55px;
}
.btn h3{
margin: 0 auto;
font-family: 'Cabin', sans-serif;
}
.about{
background-color: rgb(175, 187, 206);
height:300px;
font-size:16px;
}
.container{
margin-top:0px;
}
.body-text{
font-family:'Cabin', sans-serif;
padding-top:60px;
padding-left:25px;
font-size:175%;
}
.my-image{
height:280px;
width:270px;
padding-top:20px;
padding-right:30px;
}
.portfolio{
height: 1200px;
}
#portfolio-heading{
padding-top: 30px;
color: rgb(255,255,255);
}
This can be done using CSS:-
https://jsfiddle.net/Lrbw117q/1/
You can also put the background image inline if you need to.
#box1 {
background-image: url('http://i.imgur.com/Ym35iJI.jpg');
background-size: cover;
}
#box2 {
background-image: url('http://i.imgur.com/ot6RubY.jpg');
background-size: cover;
}
.img-thumbnail {
height: 640px;
width: 480px;
border: 5px solid red;
}
I just placed your code into a fresh html file, and tested it. Both images are given the exact same height. I personally would check your stylesheet for any inconsistencies in any of the mentioned classes/IDs, or anything that could have affected its size.
You may want to check for your styling for a
'height:auto;'
or the like.
My suggestion would be to put a 'overflow:hidden;' into your stylesheet "img-thumbnail" class.
To be able to successfully fix this for you, we would need to see more of your code.
Edit: Also, I may suggest that you check to see which of the divs is the incorrect height. In chrome, this can be done by inspecting element (right-click > inspect element), navigating to the code in question, and hovering over it. This should hopefully determine your issue.
You can do this with flex property try the demo
.outer , .outer div {
display:flex;
}
<div class="row">
<div class="outer">
<div class="col-md-6 col-sm-6 col-xs-6">
<img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" width="640px" height="480px">
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" width="640px" height="480px">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
The width and height attribute doesn't work on an image:
You should do this:
<div class="row">
<div class="col-md-6">
<img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" style="widht: 640px; height:480px;" />
</div>
<div class="col-md-6">
<img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="widht: 640px; height:480px;">
</div>
</div>
Better practice however is that make you own class:
<div class="row">
<div class="col-md-6">
<img class="myClass" src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" />
</div>
<div class="col-md-6">
<img class="myClass" src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="widht: 640px; height:480px;">
</div>
</div>
And make a css-file with following code:
.myClass {
width: 640px;
height: 480px;
}
I however suggest the following thing. Make sure your images have the same size in advance using an editing tool (i.e. Photoshop) and use the default img-responsive class that comes standard with bootstrap.
This will make your website more responsive which is preferred.
you can use this code:
div.col-md-6 {
height:400px;
position:relative;
display:inline-block;
overflow:hidden;
}
img.img-thumbnail {
position:absolute;
top:50%;
min-height:100%;
display:block;
left:50%;
-webkit-transform: translate(-50%, -50%);
min-width:100%;
}
<div class="row">
<div class="col-md-6">
<img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" style="height: 500px;background-size: cover;"/>
</div>
<div class="col-md-6">
<img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="height: 500px;background-size: cover;"/>
</div>
I am trying to get text to vertically align to the middle but can't seem to get it to work.
HTML:
<div class="row">
<div class="col-md-4">
Login
</div>
<div class="col-md-4">
Menu
</div>
<div class="col-md-4">
Contact
</div>
</div>
CSS:
.custom-button {
color:#ECDBFF;
background-color:#4F0100;
display:inline-block;
height: 220px;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
text-decoration:none;
}
.width-100 {width: 100%;}
I have googled quite a bit and tried a couple of things but i can't seem to get the text to go to the middle. can anyone advise what i would need to add/change to get this to work.
If your have a text which is restricted to single line then line-height would be the best solution.
try with this
line-height:220px; /*height of your container */
JsFiddle Demo
You can as well use vertical-align a pseudo element (:before or :after ) and an extra box (inline-block) to allow content to wrap on a few lines : see and run snippet below.
.custom-button {
color: #ECDBFF;
background-color: #4F0100;
display: inline-block;
height: 220px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.width-100 {
width: 100%;
}
.custom-button:before {
display:inline-block;
content:'';
height:220px;
vertical-align:middle;
margin:-0 -0.25em;;
}
a span {display:inline-block;
vertical-align:middle;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>
<div class="row">
<div class="col-md-4 col-xs-4">
Login
</div>
<div class="col-md-4 col-xs-4">
Menu
</div>
<div class="col-md-4 col-xs-4">
<span>Cont<br/>act</span>
</div>
</div>
I have a client who wants a particular design on their home page to match what is seen on their magazine cover. The basic stairstep design of the cover never changes but occasionally the images do. I have not been able to devise a way to cover this format without using 1 large image.
Here's a fiddle: http://jsfiddle.net/z6ghY/
Note: The appearance in this fiddle is correct in how the client wants it to be seen. My problem is that it uses one large image that must be changed occasionally. It would be much easier if these three images were separated.
Anyone know the best way I can achieve this? The images can be placed via HTML or CSS, either way does not matter, though it would be nice to see them in the HTML for SEO benefits.
In case the fiddle doesn't display the image here it is.. http://i.imgur.com/6s2i9L7.png
HTML:
<h2>Innovative Engineering Solutions in Material Handling</h2>
<div class="home-container">
<div class="home-content"><p>Experience the impact that Lauyans & Company can make on your business success. Through innovative engineering solutions in material handling, Lauyans will take responsibility for the planning, execution and acceptance of your project.</p>
<!--h2>Lauyans... why choose anyone else?</h2-->
<h2 style="margin: 80px 0 0 30px;">Lauyans...<br /> why choose<br /> anyone else?</h2>
</div><!-- END HOME CONTENT -->
</div><!-- END HOME CONTAINER -->
<div class="home-container2">
<div class="home-planning">
<h3>Planning</h3>
</div>
<div class="home-execution">
<h3>Execution</h3>
</div>
<div class="home-acceptance">
<h3>Acceptance</h3>
</div>
</div>
CSS:
.home-container { width: 690px; height: 459px; background: url('/wp-content/uploads/2013/01/home-image.png') 50% 100% no-repeat; }
.home-container2 { width: 690px; }
.home-content { width: 430px; height: 429px; padding: 15px; }
.home-content p { padding: 0; margin: 0; }
.home-content h2 { padding-top: 10px; margin: 0; }
.home-container2 h3 { padding-top: 0px; margin: 0; text-align: center; }
.home-planning { width: 230px; float: left; }
.home-execution { width: 230px; float: left; }
.home-acceptance { width: 230px; float: left; }
I would take the absolute positioning route considering the "unique" layout you are going for:
http://jsfiddle.net/z6ghY/1/
I reworked everything (including the images which I had to grab from somewhere else):
HTML
<div class="home_con">
<h2 class="pge_title">Innovative Kitten Solutions</h2>
<div class="home_step">
<h2 class="step-title">Lauyans...<br /> why choose<br /> anyone else?</h2>
<p>
Experience the impact that Kittens can make on your business success through
purring.
</p>
<img class="img1" src="http://www.vivapets.com/img/album/52/19052_white_persian_kittens_for_adoption_thb.jpg" />
<img class="img2" src="http://www.saudivets.com/images/Vpic20.jpg" />
<img class="img3" src="http://fc04.deviantart.net/fs70/f/2011/167/2/8/kitten_tracks_banner_100x300_by_xxjessie_kittehxx-d3j2h51.png" />
</div>
<div class="img_text">
<div class="img_text_ele">Planning</div>
<div class="img_text_ele">Execution</div>
<div class="img_text_ele">Acceptance</div>
</div>
</div>
CSS
.home_con h2.pge_title { font-weight:bold; font-size:1.125em; }
.home_step { width:300px; height:300px; position:relative; }
.home_step h2.step-title { position:absolute; top:110px; left:10px; }
.home_step p { width:200px; position:absolute; top:10px; left:10px; }
.home_step img { position:absolute; bottom:0px; }
.home_step .img1 { left;0px; }
.home_step .img2 { left:100px; }
.home_step .img3 { left:200px; }
.home_con .img_text { width:300px; overflow:hidden; }
.home_con .img_text_ele { width:100px; float:left; text-align:center; }
This way would need the images to be chopped up a bit but it would work if that was cool to do:
http://jsfiddle.net/5qfLj/1/
HTML:
<div class="container">
<div class="row">
<div class="span2">1</div>
<div class="span1" style="background:#ccc;">2</div>
</div>
<div class="row">
<div class="span1">3</div>
<div class="span1" style="background:#666;">4</div>
<div class="span1" style="background:#ccc;"></div>
</div>
<div class="row">
<div class="span1" style="background:#999;">5</div>
<div class="span1" style="background:#666;">6</div>
<div class="span1" style="background:#ccc;">7</div>
</div>
</div>
CSS:
.container {
width:600px;
}
.row {
overflow: hidden;
}
.span1 {
float:left;
width:200px;
height:200px;
}
.span2 {
width:400px;
height:200px;
float:left;
}