I have text and image inside a div and I want the text to be aligned at the top of the image, not the middle.
Here's how it looks: http://bitly.com/VSSoul
CSS:
.book1 {
width: 100%;
overflow: auto;
}
.book2 {
width: 100%;
overflow: auto;
}
.book1 img {
float: right;
width: 150px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
How do I make the text go to the top of the div, and not center relative of image?
It actually is aligned to the top. The h4 tag has default margins, so setting:
h4 {
margin-top: 0;
}
would do the trick.
.book img {
float: right;
width: 150px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.book {
margin-bottom: 2em;
overflow: auto;
}
Demo JSFiddle:
http://jsfiddle.net/e636q/
hear you go. add
h4 { margin-top: 0; }
.book1 {margin-bottom: 1.5em;}
the extra margin on .book1 helps with spacing the individual books apart
Related
I am working with this demo: http://blog.templatemonster.com/demos/coding-a-responsive-lightbox-image-gallery-for-website-portfolios/demo/index.html
From here: http://blog.templatemonster.com/2014/05/20/coding-responsive-lightbox-gallery-portfolios-tutorial/
Is there a way to center the thumbnails? It looks like the right is off by about 25px.
Remove the float, set to inline-block instead.
Give the margin 10px to the left and 10px to the right instead of a flat 20px to the right.
From:
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
To:
#portfolio li {
display: inline-block;
float: none;
width: 30%;
max-width: 400px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
This is a simple CSS question, however I don't have a clue yet. I have several p tags with a background color, my problem is that the background extends to 100% of the screen in every tag, I just want to wrapp the words, creating the effect as buttoms or blocks. I don't understand why the p background goes to all the width.
Fiddle: Exact example HERE
<div class="process_wrapper_mobile">
<div class="inter_mobile_process">
<p>Interview</p>
</div>
<div class="inter_mobile_process">
<p>Data reception</p>
</div>
<div class="inter_mobile_process">
<p>Design</p>
</div>
CSS:
.process_wrapper_mobile {
position: relative;
float: left;
width: 100%;
height: auto;
background-color: #CCC;
}
.process_wrapper_mobile .inter_mobile_process {
position: relative;
float: left;
width: 100%;
height: auto;
margin-bottom: 3%;
}
.process_wrapper_mobile .inter_mobile_process p {
text-align: center;
color: #fff;
font-size: 0.9em;
background-color: #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 3% 5%;
}
PLease check my fiddle.
Thanks!
The P element is a block element, which extends the whole width by default. If you change the display to display: inline-block, they will only take up the space of the text. Then you need to work on the inline positioning of the buttons.
p is block level element, you can add a span which is inline inside the p, and add your styling around that. However, you don't really need a p, just a span
.process_wrapper_mobile {
position: relative;
float: left;
width: 100%;
height: auto;
background-color: #CCC;
}
.process_wrapper_mobile .inter_mobile_process {
position: relative;
float: left;
width: 100%;
height: auto;
margin-bottom: 3%;
text-align: center; /* Move this here from the p */
}
/* Make the p into a span, it's not a paragraph */
.process_wrapper_mobile .inter_mobile_process span{
padding: 3% 5%;
display: inline-block;
color: #fff;
font-size: 0.9em;
background-color: #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
<div class="process_wrapper_mobile">
<div class="inter_mobile_process">
<span>Interview</span>
</div>
<div class="inter_mobile_process">
<span>Data reception</span>
</div>
<div class="inter_mobile_process">
<span>Design</span>
</div>
</div>
Update the fiddle check this link
--Added display:inline-block style to 'P' tag
--Added margin-bottom 10% to .process_wrapper_mobile .inter_mobile_process
Updated Code
.process_wrapper_mobile .inter_mobile_process {
position: relative;
float: left;
width: 100%;
height: auto;
**margin-bottom: 10%;**
}
.process_wrapper_mobile .inter_mobile_process p {
text-align: center;
color: #fff;
font-size: 0.9em;
background-color: #333;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 3% 5%;
**display:inline-block;**
}
Add float:left to .process_wrapper_mobile .inter_mobile_process p
.process_wrapper_mobile .inter_mobile_process p{
float:left
}
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.
I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.
Any help would be appreciated!
My website is: http://www.onedirectionconnection.com
And here's the CSS:
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1125px;
text-align: left;
}
div#header {
clear: both;
height: 500px;
margin-top: 0px;
padding: 0px;
border: 0px
}
div#navi {
text-align: center;
background: #FFFFFF;
clear: both;
height: 60px
margin-left: 13px;
margin-right: 13px;
margin-bottom: 10px;
padding-left: 39px;
border-bottom: 3px solid #FF0000;
border-top: 3px solid #FF0000;
}
div#left {
float: left;
width: 320px;
}
div#right {
float: right;
width: 320px;
}
div#middle {
padding: 0px 325px 5px 325px;
margin: 0px;
}
I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!
Increase width of container or decrease some margins.
#middle
{
padding: 0px 0px 5px 0px;
margin: 0px;
overflow: hidden;
width: 485px;
float: left;
}
You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.
Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.
I'm working on a web site and im having trouble with the left navigation. As you can see here http://animactions.ca/test/Desktop/
the left navigation menu does not go to the bottom, it stops after the content. I would need it to stop at the bottom of the page.
Here is the css:
/* CSS layout */
body {
margin: 0;
padding: 0;
}
#masthead {
}
#top_nav {
width: 700px;
background-color: #DDDDDD;
margin-right: auto;
margin-left: auto;
}
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
}
#left_col {
width: 95px;
float: left;
background-color: #B79F63;
border-right: 5px solid #976F43;
}
#page_content {
width: 600px;
float: right;
background-color: #D2C388;
}
#footer {
clear: both;
width: 700px;
text-align: center;
background-color: #E0E0E0;
margin-right: auto;
margin-left: auto;
}
Thanks
One way around this is to create a background image for the div containing the navigation and the main content (in your code it's "container") that mimicks the background colors and separation lines you want for the columns. It can often be as small as 1px high but should be the width of the container, and will repeat down the page.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://www.cssnewbie.com/equal-height-columns-with-jquery/