Center 2 floating images - html

I want to center 2 images I've set display to block and margin 0 but nothing happens, I've tried the margin on the different divs but also no result. I can't seem to find out what I'm doing wrong,
this is the css:
#partners {
background-color: #FFF;
height: 500px;
margin: auto;
display: block;
}
#partners h2 {
color: #000000;
font-family: "helvetica";
font-size: 36px;
text-align: center;
padding-top: 110px;
}
.partner1 {
float: left;
padding: 0px, 50px, 0px, 50px;
margin-top: 125px;
}
.partner1 img {
width: 300px;
}
.partner2 {
float: left;
padding: 0px, 50px, 0px, 50px;
margin-top: 125px;
display: block;
}
.partner2 img {
width: 300px;
margin: auto;
}

Just assuming your markup here, but you want to add text-align: center to the parent, then make the child block elements display: inline-block, then those elements will be centered in the parent.
You also don't need commas between the padding amounts, and I consolidated some of your CSS.
#partners {
background-color: #FFF;
height: 500px;
margin: auto;
display: block;
text-align: center;
}
#partners h2 {
color: #000000;
font-family: "helvetica";
font-size: 36px;
text-align: center;
padding-top: 110px;
}
.partner1, .partner2 {
padding: 0px 50px 0px 50px;
margin-top: 125px;
display: inline-block;
}
.partner1 img, .partner2 img {
width: 300px;
}

Related

Center parent div issue

My problem is with the CSS: I want to center the #product-section, while the .product-img should all be aligned as they are currently. To clarify: I want all products to be centered, but lined up as they currently are.
The parent div (which I want to be centered):
#product-section {
margin: 0;
padding: 0;
padding-left: 15px;
display: inline-block;
margin: 0 auto;
display: inline-block;
background-color: red;
}
The products (which should be lined up as in the picture):
.product-img {
width: 220px;
height: 220px;
border: 2px solid #F3F3F3;
display: inline-block;
margin: 30px 15px 0 0;
vertical-align: top;
}
.product-img img {
display: block;
margin: 0 auto 0 auto;
height: 150px;
width: 80%;
}
.product-img h3 {
height: 50px;
width: 100%;
line-height: 50px;
font-size: 36px;
margin: 20px 0 0 0;
background-color: #F3F3F3;
text-align: center;
font-family: 'Roboto';
color: #6C6C6C;
}
The Header Text
.category {
font-size: 64px;
font-family: 'Open Sans';
width: 100%;
text-align: center;
margin: 50px auto 0 auto;
display: inline-block;
}
HTML
<div id="product-section">
<h2 class="category">Mejeri</h2>
<div id="Mjölk" class="product-img product added"><h4><span>6</span> st</h4><img src="assets/icons/milk.png"><h3>Mjölk</h3></div>
</div>

How to align an image inline with the box containing some text?

I have a fiddle in which I want to align few images (keyboard, computer and handshake) and text inline with the rectangle box (having some text) exactly like these images.
I tried making them inline by using display inline-block, display: block, margin-left:auto, margin-right:auto but still I am unable to replicate it.
The snippets of HTML code which I am using is:
.openings {
height: 650px;
width: 100%;
}
.openings .headline-text:before {
border-top: 1px solid #1072B8;
display: block;
position: relative;
top: -25px;
margin: 0 auto;
width: 50%;
content: "";
}
.openings .headline-text {
text-align: center;
font-size: 24px;
color: #1072B8;
padding-bottom: 80px;
padding-top: 160px;
font-weight: bold;
}
.openings .rectangle {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
margin-right: 400px;
width: 300px;
height: 100px;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 100px;
float: right;
}
.section {
margin-left: 300px;
float: left;
font-style: italic;
font-weight: bold;
font-size: 1rem;
color: #1072B8;
}
.openings .job-opening {
clear: both;
height: 150px;
}
.openings {
height: 1480px;
width: 100%;
}

padding beside image while using bootstrap/css

I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.
full screen example
i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.
bootstrap code
<div id="banner" class="container-fluid">
<div class="col-lg-12 nopadding">
<img src="images/headercopy.jpeg">
</div>
</div>
css code
html, body {
line-height: 1.8;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h3 {
text-align: center;
color: white;
}
.nav {
color: white;
}
.navbar-transparent .navbar-brand {
color: white; //nightalreadycolor
}
.navbar-collapse .page-scroll {
color: white; //nightalreadycolor
}
.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
background-color: transparent;
color: #c8e8f4; //light blue
}
.navbar .navbar-transparent .navbar-fixed-type {
background-color: red;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.aboutimage {
background-size: 100% 100%;
}
img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#about {
color: white;
height: 600px;
margin-right: 15px;
text-align: justify;
}
#about p {
display: block;
font-size: 20px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: white;
}
#about p img {
padding-top: 5px;
outline: solid #f00 1px !important;
}
.container {}
#fleet {
border-right: thin solid black;
color: white;
width: 50%;
height: 600px;
float: left;
background-color: grey;
}
#fleet h1 {
text-align: center;
}
#fleet h2 {
padding-right: 10%;
float: right;
}
#rates {
color: white;
width: 50%;
height: 600px;
float: right;
background-color: #574951;
}
#rates h1 {
text-align: center;
}
#contact {
text-align: center;
height: 600px;
color: white;
background-color: #574951;
}
#reservation {
display: inline-block;
height: 600px;
color: white;
text-align: center;
}
Sorry if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.
Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:
#banner {
background-image: url('images/headercopy.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Then you just have to use this markup:
<div id="banner" class="container-fluid"></div>
Of course you can set to your css code for the #banner the height you want etc.

Problems with moving element CSS

I'd like to move element h1 a bit down but without moving the whole div block.
HTML code is here:
<div class="mainblock"></div>
<div class="under"><h1>Some text</h1></div>
CSS rules is here:
.mainblock {
margin: 40px auto 0 auto;
width: 40%;
height: 250px;
background-color: cadetblue;
}
.under {
margin: 0 auto;
width: 40%;
height: 250px;
background-color: coral;
}
h1 {
text-align: center;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
/* Here I add some margin for H1 */
margin-top: 20px;
}
How can I move h1 tag only?
Using padding is not suitable because it adds some space and if it were a link it created some clickable space which I don't need.
Use position:relativeon the h1 element to move it without it affecting the position of any other elements.
h1 {
position:relative;
top:20px;
text-align: center;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
/* Here I add some margin for H1 */
margin-top: 20px;
}
You can move it by adding line-height
Another possibility to achieve what you want is using positioning like so:
.under {
margin: 0 auto;
width: 40%;
height: 250px;
background-color: coral;
position:relative;
}
h1 {
text-align: center;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
position:absolute;
top: 20px;
}
It looks like padding-top does what you want if the link is inside the h1 tag.
HTML
<div class="mainblock"></div>
<div class="under"><h1>Some text</h1></div>
CSS
.mainblock {
margin: 40px auto 0 auto;
width: 40%;
height: 250px;
background-color: cadetblue;
}
.under {
margin: 0 auto;
width: 40%;
height: 250px;
background-color: coral;
}
h1 {
text-align: center;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
/* replace margin-top with padding-top */
padding-top: 20px;
}
Here's a fiddle...I changed the padding from 20px to 60px to make it easier to see that there's no clickable space above the text.
http://jsfiddle.net/htpb9bdk/
Provide the position:absolute to parent and child element
try this : http://jsfiddle.net/heuek2za/
.mainblock {
margin: 40px auto 0 auto;
width: 40%;
height: 250px;
background-color: cadetblue;
margin-left:28%;
}
.under {
margin: 0 auto;
position:absolute;
width: 40%;
height: 250px;
background-color: coral;
margin-left:27%;
margin-top:4%;
}
h1 {
text-align: center;
position:absolute;
font: 40px/30px Tahoma,sans-serif;
font-weight: 900;
color: azure;
/* Here I add some margin for H1 */
margin-top: 50%;
}
You can also apply float:left;width 100% to H1 which makes your margin to work.
The new CSS for h1 becomes:
h1 {
color: azure;
float: left;
font: 900 40px/30px Tahoma,sans-serif;
margin-top: 20px;
position: relative;
text-align: center;
width: 100%;
}

Expand box with content

Sorry for a weird title but I don't really know how to describe it easily.
First I'll link my JSFiddle on it http://jsfiddle.net/b7YTd/
When I added the "float: left" and "float: right" the rows jumped outside the box and the box doesn't expand as the content gets "larger".
My question is, how do I make the box expand after the content like it should do with content inside it if it doesn't have a set height?
In order to post my JSFiddle I need to add some code so my CSS:
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
}
.friend_left {
float: left;
width: 250px;
}
.friend_right {
float: right;
width: 250px;
}
.friend img {
width: 50px;
height: 50px;
float: left;
margin-left: 15px;
margin-right: 8px;
}
.friend ul {
list-style-type: none;
margin-top: -15px;
margin-left: 35px;
}
#profile_friends h4 {
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
color: rgb(110,110,110);
font-weight: bold;
height: 20px;
}
#profile_friends hr {
margin: 0;
padding: 0;
}
If I understand you correctly use:
#friendlist {
overflow: auto;
}
http://jsfiddle.net/b7YTd/1/
I had this issue, but used overflow:hidden; on the parent div.
http://jsfiddle.net/b7YTd/3/
#profile_friends {
margin-top: 15px;
margin-left: -10px;
background: rgb(240,240,240);
border: 2px solid #555;
border-radius: 3px;
width: 100%;
overflow:hidden;
}