I am having trouble making the <h2 class="feature_description_content"> vertically align with the image to it's left. You can see that it's quite a bit lower than the top of the image, and I can't seem to find the css that is responsible for it.
Here's an image:
Here is the code:
<div class="feature feature-item-248">
<img class="main" src="http://www.bolistylus.com/wp-content/uploads/uclaproduct.png" alt="" /></p>
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
<p>Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.</p>
</div></div>
</p></div>
Thanks
This issues is must be due to default margin and padding of default HTML elements you must try out by setting
h2
{
margin:0px;
padding:0px;
}
and then change padding as required
Set its margin-top: 0; - simple :)
The image suppose to be floated to the left and cleared both ways, so text can be aligned properly...
img .main {
float: left;
clear: both;
}
Related
I have 4 icons that align horizontally. However I would like to have them align with each other through a center line if that makes sense. At the moment they aren't matching up. The top of one image may be in line with the middle of another for example. The icons are of different sizes but I don't mind that, as long as the align centrally. Here is my html
<section class="feature">
<div class="grid_4">
<img src="images/image-1.png">
<p>
Email
iamapdige#<br>hotmail.com
</p>
</div>
<div class="grid_4">
<img src="images/image-2.png">
<p>
Mobile<br>
Call or text 085PIDGEON
</p>
</div>
<div class="grid_4">
<img src="images/image-3.png">
<p>
Facebook<br>
Check us out on Facebook!
</p>
</div>
<div class="grid_4">
<img src="images/image-4.png">
<p>
Twitter<br>
Tweet me! #pidgeon
</p>
</div>
</section>
And the relevant CSS
.feature {
margin-top: 70px;
font-size: 15px;
font-family: sans-serif;
}
.feature img {
float: left;
margin-right: 6px;
}
Thanks for any help. If it's not clear what I mean then I can upload a picture of the PS template to explain.
If the icons are all different widths but you want them all centered on top of each other, try putting the images in spans. Set the width of the spans to be the width of the widest icon, and use text-align:center on them.
Check this JSFIDDLE
Basically, you need to adjust the margins inside, and make the bordering container that i added equal to the sum of the widths and margins of the grid_4s.
so:
.feature{
width:600px;
margin:auto;
}
.grid_4{
width:100px;
margin:25px;
}
What the margin auto does is that is adjusts its margins automatically within section's width of 100%. the margins auto-position itself in the center based on the width of the container feature. therefore if you want your images central and aligned horizontally, then they need to perfectly equal the width of the feature div, so add up the width and margins (horizontally) and come with the answer as the width of feature, if you follow...
hope this helps!
I am creating my first site using bootstrap, and as its a joomla site its version 2.3
I am having some problems getting going
here is the code so far:
<body>
<div class="container">
<div class="row logobar">
<div class="span12">
<div class="logoholder">
<img src="templates/<?php echo $this->template ?>/images/open-plan-design-logo.jpg" alt="Open Plan Design Logo " />
</div>
</div>
<!-- row --></div>....
and the css
body {
background:#231f21;
background-color:#DCDBDB;
color:#fff;
}
.container {
background-color:yellow;
}
.logoholder{
width:499px;
margin:0 auto;
}
.logobar {
margin-bottom:20px;
background-color:green;
}
At reduced screen widths everything looks fine - the image is centered, and reduces in size
However, at full width the image is not exactly centered, and there is an odd bit of green (from .logobar) sticking out at the left. If I take out the .row then the green disappears but of course nothing is resonsive
I guess I am doing something wrong...
you can see what I mean here www.opd.ee-web.co.uk
You need to change your row to row-fluid which will remove this negative margin.
<div class="row-fluid logobar">
Documentation [1].
More info [1].
The elements with .row have a negative margin applied to ensure and contained .span elements are correctly aligned.
You can remove this negative margin with some custom css, but that is likely to cause more problems.
The ideal solution is to simple move the logobar to the span level.
<div class="span12 logobar">
Add following code in your custom css file
body .row{
margin-left:0 !important;
}
hi I have two container divs one of them has a div with an image background and i think this is the div that is causing problem. I tried removing both container divs and the gap was still here. there are no margins no paddings, and i know it is not the image that has this line its not there when i open it in photoshop. I am also using css reset
Where is this space coming from?
css
.container{
width:100%;
}
.container2{
width:100%;
}
.first-image{
width:1430px;
height:497px;
background-image:url('../images/introimg.jpg');
background-repeat:no-repeat;
background-size: 100%;
border:none;
}
.jamey{
width:35%;
}
.second-image{
width:1430px;
height:430px;
background-image:url('../images/secondimg.jpg');
background-repeat:no-repeat;
background-size: 100%;
}
html
<div class="container">
<div class="wrapper">
<div id="overlay"></div>
<div class="first-image">
<div class="jamey">
<p class="def">
JAMEY
</p>
<p class="rip-date">03.02.1997 - 09.18.2011</p>
<p class="def2">Anonymous hate messages were posted on his Formspring account including one that claimed:</p>
</div>
</div>
</div>
</div>
<div class="container2">
<div class="intro-div">
<div class="end-hate">
<h1>PUT AN END TO HATE.</h1>
<p>
ANYTHING WRITTEN ONLINE can become viral
</p>
<p>
We believe that the way we behave online should be no different from the way that we behave in
</p>
<button type="button">JOIN CAMPAIGN</button>
</div>
</div>
Your problem can be removed by,
.first-image
{
margin-bottom: -20px; // or desired settings !
}
You may try adding the
box-sizing: border-box;
It helps setting padding/borders (maybe you have one) internal to the element. If it has some effect you can override these settings later.
Anyway, it's recommended that you add a jsFiddle so we can see for ourselves.
I have a page which looks like this:
Content contains a static table of fixed width (determined by content) inside a centered div. Below content there is a div that contains a line of text and an image below that text. It is meant to float on the left of the Content. The page and image has max-width and max-height. But when page is resized, Image shrinks twice slower than the page. This causes the page to look like this:
I want Image to always be filling the most of that white gap on the left. When the page is resized, the Image should also resize accordingly.
http://jsfiddle.net/FZ4KG/
Html:
<section align="center">
<h4 align="center">Heading</h4>
<div align="center">
<table>Content</table>
<div id="image_box">
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
</section>
Css:
#image_box {
padding-left: 15px;
height: 0px;
top: -75px;
position: relative;
}
#image {
float: left;
max-width: 20%;
}
A few things before I'm able to fully comprehend what it is you're looking for.
It's strange how you're using the HTML5 <section> tag with a deprecated, and as of HTML5 removed, align attribute. And still strange the use of an inline style when using css on those elements.
I will assume you're looking to center those elements within their parent containers. To achieve this, you would need to use a set width and set the horizontal margin of the element to auto.
div {
margin: 0 auto;
}
You also have a typo in your mark up. The DIV id says imabe_box. Assume it's supposed to be image_box.
<div align="center">
<table>Content</table>
<div id="imabe_box"> // ID should be set to 'image_box'
<p align="left">Text above image</p>
<img src="img.png" id="image">
</div>
</div>
Please add more code or reply to the answer and we can help you further.
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.