To my understanding all you need for margin: 0 auto; to center the content is:
display: block;
No floats
No absolute positioning
And a set width
Any ideas on why this isn't working?
I can apply text-align: center, and this will center is, however I just want to center with the margins. Any ideas.
Here is the pen: http://codepen.io/anon/pen/JovwoJ
It is working, you just don't have another element wrapped around it to see that it is centered and its width is set to 100% so you can't see that it is centered because it takes up the full width.
HTML & CSS:
.wrapper
{
width: 80%;
margin: 0 auto;
display: block;
}
<div style="width:100%">
<div class="wrapper">
<div class="nav-bg">
<div class="nav">
Solar Panel Kits
Solar Water & Pool
Portable Solar
Solar Panels
Solar System Parts
Emergency Solar
Sale
</div>
</div>
<div class="info1-bg">
<div class="info">
<div class="inner2">
<b>Free Delivery Wordwide</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="info2">
<div class="inner2">
<b>Free Return For 90 Days</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="info3">
<div class="inner2">
<b>Discount On Order Gift</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="slider">
<img src="">
</div>
<div class="learnSolar">
<div class="learn1">
<b>Get Insight On</b>
<b>Solar Basics</b>
</div>
<div class="learn1">
<b>Get Insight On</b>
<b>Solar Rebates</b>
</div>
<div class="learn1">
<b>Schedule A Free</b>
<b>Solar Analysis</b>
</div>
</div>
<div class="footer-bg">
<div class="footer">
Customer Service
Contact Us
Blog
Links
Learn More
FAQ
About Us
</div>
</div>
</div>
</div>
</div>
text-align is just centering the display:inline elements that are inside of your wrapper div.
You have the wrapper set to 100% width. With that, Margin: 0 auto; will automatically center the wrapper by giving it left and right margins of 0, since it's already taking up the entire page. You could set the wrapper to width: 90%;, or anything besides 100% to have it center correctly.
Further, the divs that are inside of your wrapper are all block elements, meaning they will take up the entire width of your wrapper. Which is why, even when it's centered correctly with Alex W's answer, it isn't centered by our standards.
Edit: I posted this because the previous answer didn't mention the wrapper width problem before it was edited, and I'm not able to make comments yet.
Related
I'm using bootstrap to distribute my header elements in two columns.
So there is a row, with 2 col-md-6 to separate elements to the left and to the right. This is ok.
But when resizing to Smartphones, I'd like to show items in this order (top to bottom):
1) text (I'd like to show it on top but reduce font-size)
2) Buttons (1 on top of the other)
3) Image (Smaller Image doesn't matter).
How to do that using Bootstrap?
CodePen:
https://codepen.io/ogonzales/pen/ebKNoK
HTML
<header class="header" id="header1">
<div class="row">
<div class="col-md-6">
<div class="circle">
<br>
<div class="caption">
<h2 class="title display-3">Stickers <strong>Personalizados</strong></h2>
<p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam
reprehenderit necessitatibus sequi.</p>
</div>
<div class="row">
<div class="col-md-5">
Comprar
</div>
<div class="col-md-5 my-home-banner-image">
<a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<br>
<img class="" src="https://www.austinhomebrew.com/assets/images/sticke-alt-8989.png" width="440px" height="300px">
</div>
</div>
</header>
Reference:
UPDATE 1:
I'm getting this results from AnnieP's answer. But:
How to give spacing between sections and specially between buttons?
What you have should work, as far as the Bootstrap goes. col-md-6 is saying "I want this column to be 6-wide on screens greater than 767 px" and because you don't specify anything for col-xs and col-sm, by default every div with a .col- will be col-12, or full-width, on screens 767 and smaller. It looks like you don't have bootstrap hooked up to the Codepen, so it won't act responsively there, but it should when Bootstrap is working. It looks like you have a lot of CSS in there that's trying to handle what Bootstrap's columns would do for you. For instance the following CSS that you have should all be handled with <div class="col-md-6">:
/*=== Large devices (desktops, 992px and up) ===*/
#media (min-width: 992px) {
.header .center {
width: 50%;
}
What you need to do is change the CSS using media queries for the text size change and the image sizing/positioning. Your image is set with absolute positioning, which is why it's on top of the buttons when it responsively adjusts to a smaller screen. Instead, utilize Bootstrap's grid system and give it col-md-6 as well. Here's the general outline of all you should need:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Stickers Personalizados</h2>
<p>Lorum impsum</p>
<div class="row">
<div class="col-md-6">
Comprar
</div>
<div class="col-md-6">
Muestras
</div>
</div>
</div>
<div class="col-md-6">
<img class="" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" width="440px" height="300px">
</div>
</div>
</div>
Revisit the Bootstrap getting started docs if you need help setting it up, and you likely don't need most of the CSS in your Codepen.
Update:
To achieve spacing below sections, you can add a wrapper div with class="row", but that won't work for the buttons because they start on the same row. In that case, you'll want to add margin-bottom in the css. For example:
.btn {
margin-bottom: 10px;
}
I'm using the Bulma navbar, and the function of it is really great! My question is: on smaller screens, when the navbar-menu is shown as a dropdown via clicking the burger menu - how can I style that?
It shows up as full-width, but I'd really like to be able to have it narrower, or maybe adjust to the width of the contents.
Here's how it looks currently:
Closed:
Open:
For the burger menu dropdown, all of the examples on the Bulma page seem to reach the full width of the Navbar. (Though not so for dropdowns within the navbar).
Does anyone know how I can make it not full-width? I mean, I can easily add max-width: 50%; etc on the .navbar-menu, but I don't know how to then make the menu div 'stick' to the right-hand side of the navbar, since it doesn't look very nice aligned to the left:
I feel like I'm missing the obvious here, if anyone can put me on the right path I'd appreciate it so much!
code stuff
My HTML looks basically exactly like the Bulma docs, but I'll add it here just in case:
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<div class="navbar-item">
<p class="title"><span>title here</span></p>
</div>
<div class="button navbar-burger is-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div>menu item 1</div>
</div>
<div class="navbar-item">
<div>menu item 2</div>
</div>
</div>
</div>
</nav>
And just to be clear, because it's a common question, I don't have any problems with the functionality of the navbar - just wanting styling advice.
Update
Below, #sol wrote about adding max-width: 50%; and float: right; as a solution. Visually though, it isn't quite right:
Closed (looking normal):
Open (uh oh alignment):
You can create this layout by applying some flexbox properties to .navbar-menu and its container.
You'll need to wrap these rules in a media query to ensure it doesn't affect the menu at larger screen sizes.
fiddle
#media screen and (max-width: 1023px) {
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-brand {
min-width: 100%;
}
.navbar-menu {
margin-left: auto;
min-width: 50%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<div class="navbar-item">
<p class="title"><span>title here</span></p>
</div>
<div class="button navbar-burger is-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div>menu item 1</div>
</div>
<div class="navbar-item">
<div>menu item 2</div>
</div>
</div>
</div>
</nav>
<div class="section content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, provident quasi nulla fugiat libero nemo tempora adipisci quisquam voluptatibus blanditiis suscipit cupiditate obcaecati numquam, odio eligendi repellendus! Commodi, mollitia, modi!</p>
</div>
You can try the styling below:
.navbar {
position:relative;
}
.navbar-end {
position:absolute;
left:50%;
}
.navbar-menu {
max-width:50%;
}
This way ".navbar" will be positioned relative to its current position which will allow ".navbar-end" to be positioned in relation to ".navbar" as one of its descending children elements ("position:absolute" positions the element in relation to its nearest positioned ancestor). You may have to tweak the left % if it doesn't fit exactly and also specify either top or bottom offsets if the menu items get displaced vertically.
Currently trying to display my img full length, when the browser(chrome latest) width is 400px there is some space under the img:
When I make the browserwidth 470px there is no issue. How can I fix this for the mobile view for 400px?
This is the relevant fragment:
<div class="visible-xs">
<div class="col-xs-12 employee">
<div class="col-xs-4"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bertboerland/128.jpg" alt=""></div>
<div class="col-xs-8">
<div><span class="name"> Isabelle Clarke</span></div>
<div>International Group Engineer</div>
<div>39</div>
<div>10/07/2016</div>
<div>Vel velit repellat dicta. Maxime occaecati sed dolorum et modi. Voluptates rerum</div>
</div>
</div>
</div>
This solution will make the image full height but stretched. You can add flex display and use height:100% like this :
#media all and (max-width:470px) {
.employee {
display:flex;
}
.employee img {
height:100%;
}
}
hi I am trying to have a thumbnail at the button of my picture, but it goes out of the whole span that I have here is my code here is the whole code http://jsfiddle.net/dP4eL/
I am using twitter bootstrap
<div class="tab-content">
<div class="tab-pane fade in active" id="home"><div class="container">
<div class="row">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="Hydrangeas.jpg" alt="product 1">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<div class="span1">
<div class="thumbnail"><img src="Hydrangeas.jpg" alt="image">
fav
</div>
</br>
</div>
</p>
</div>
</div>
</li>
Thank you
Your question is kinda hard to understand - i guess you do want that little "image / Favbutton"-Box to remain in its parent-div?!
Bootstrap should use the floats in the right way so, try to add to your .thumbnail-class:
.thumbnail { overflow: hidden; }
If that´s what you want to achieve.
It's hard to tell from the limited code you have there, but if you would like a div to cut off extra content you can set a width and height for it and set it's overflow to hidden like so:
.span1 {
width: 100px;
height: 100px;
overflow:hidden;
}
Just change the width and height to your specifications.
Your problem is that the class span has the property float: left. Float removes the element from the float of the document.
[class*="span"] {
float: left;
}
You have multiple instances of this css in your .. css declarations. The way I see it, you have two options.
Either delete float: left from all instances, or apply a clearfix css class to your elements. This will ensure your div remains in the flow of your document, and your parent div expands to contain it.
I would create a demo for you, but there is so much css in your js fiddle that js fiddle cannot parse it at a reasonable speed.
remove your float:left setting for your span. If you aren't happy about that then try using table :D
------------------------
h1
tab1 tab2 tab3
------------------------
text text | photo
text text | photo
text text | photo
text text | photo
text text | photo
text text |
text text text text text
text text text text text
In the above two column layout the text is floating around the right panel. This is easily achieved by right floating the right column, however this requires that the right column and its images are placed before the left column and the text in the html.
Given the possibility (who knows really but I'm not up for taking a chance) of losing page rank due to text content being lower down the page, how can I achieve the same result with the left column before the right in the html?
Related question on webmasters
I read in that referenced thread that these images are a slideshow, does that mean you know the width and height of the right "floated" block?
IF so the following fiddle example may be an option, if not I don't think it's possible without keeping the images first in source.
IF so, it means inserting one empty div first in source, dimensioning it to match the images/slideshow area and floating it right for a "placeholder".. then add position relative to your main content area, and absolutely position the actual images/slideshow over the placeholder:
example fiddle : HERE
full code as per comments :
HTML:
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="tabs">Tabs</div>
<div id="main">
<div id="ssholder"></div>
<div id="left">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> add loads more content!</p>
</div>
<div id="sshow">
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
</div>
</div>
</div>
CSS:
#wrapper {
width: 600px;
border: 1px solid #000;
}
#main {
position: relative;
border: 1px solid red;
}
#ssholder {
float: right;
width: 200px;
height: 300px;
}
#sshow {
position: absolute;
width: 200px;
height: 300px;
top: 0;
right: 0;
background: #eee;
}
#sshow img {
display: block;
}
jQuery to detect heights if not explicitly set on #sshow:
$(function() {
var sshowHeight = $('#sshow').height();
$('#ssholder').height(sshowHeight);
});
This works from IE6 on. Float it left and set width to it. Your sidebar part gets margin-left that has to be same ammount as total width of floated part (take care with margins, borders and paddings as they count to total width too).
JSfiddle: http://jsfiddle.net/easwee/reXaT/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.content {width:800px;margin:0 auto;background:#ccc;}
.content-text {float:left;width:500px;background:green;}
.content-sidebar {margin-left:500px;background:red;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}
</style>
</head>
<body>
<div class="content">
<h1>Winrar text</h1>
<div class="content-text">
Texte
</div>
<div class="content-sidebar">
asdfasdf
</div>
<div class="clear"></div>
</div>
</body>
</html>
Updated:
I moved the image div after the text div. If the size of the image is dynamic you can use jQuery to set it dynamically
jsFiddle link
If you don't know the width and height of your image element
Having text content wrap around an element can only be done using float, and since the width and height of your images are not known in advance we'll have to use javascript. I think the easiest way would be to:
Serve the HTML with the text before the image.
Using Javascript move the image before the text.
Use a simple float: right; to position the image.
This way you wont lose page rank (search engine will see the proper HTML) and users will have the desired layout.
The javascript would be as simple as
var image = document.bodocument.getElementById('imageContainer')
var text = document.getElementById('textContainer')
text.parentNode.insertBefore(image, text)
If width and height are always the same
We can fake it using CSS pretty easily by using a pseudo-element
#wrapper{
position: relative;
}
#textContainer:before {
content: '';
display: block;
width: 200px;
height: 200px;
float: right;
margin: 0 0 1em 1em;
}
#imageContainer{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
}
Here we create a fake 200x200 element before the textContainer and use it to save space for the imageContainer we put over using absolute positioning. For the absolute positioning to work you'll need a wrapper div around your textContainer and ImageContainer with position: relative;
Why not write your html in such a way that all the text occurs before all the images.
Something like :
<div id="MainWrapper">
<div id="LeftFloatedText">
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<div>
<div id="LeftFloatedImages">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
</div>
</div>