I'm new to working with divs, so I'm not too good at using them. I'm making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I'm having trouble centering the arrows in my parent div.
I searched a few things online, but nothing seemed to work. Here is my css for a simple test...
#picture_wrapper {
width:550px;
background-color:#00F;
float:left;
}
#picture_container {
width: 500px;
float: left;
padding-left:5px;
padding-right:5px;
}
#left_arrow_container {
float: left;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
#right_arrow_container {
float: right;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.
<div id="picture_wrapper">
<div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
<div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
<div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
</div>
Here is how it is being displayed on my Dreamweaver now...
pic1 http://www.startingtofeelit.com/images/pic1.png
Here is how I more or less want it to be displayed...
pic2 http://www.startingtofeelit.com/images/pic2.png
Thanks for the help.
Sounds like a job for vertical-align: middle;.
http://jsfiddle.net/Wexcode/Lp5M9/2/
#picture_wrapper {
background: #F00;
float: left;
font-size: 0;
white-space: nowrap; }
#left_arrow_container, #right_arrow_container {
height: 100%;
vertical-align: middle;
display: inline-block; }
#picture_container {
background: #00F;
padding: 0 5px;
vertical-align: middle;
display: inline-block; }
Let me know if you have any questions.
I prefer using absolute and relative position :), pretty much what I saw you were trying to achieve in your css, in order to top, left, right and bottom to work you must set a position (absolute, relative or fixed) and use your arrows as backgrounds
http://jsfiddle.net/wQqfp/2/
Related
I have a footer to posts on a blog, the posts are of dynamic with.
There are some elements in the footer that are left-aligned, one that's right-aligned and one between them that should fill the remaining space.
I thought I could use
text-overflow:ellipsis
which works if I set it to a fix width, but at the moment, the space-filling element just gets too large so the last element breaks to a new line.
Adding
white-space:nowrap;
to the outer container didn't help.
Also it'd be a nice bonus if the space-filling element would always fill the remaining space, even if it's content is not large enough.
Here is my fiddle http://jsfiddle.net/MFxk5/ , the space-filling element is the
<a href="c" class="c">...
Thanks to everyone for helping out! Maybe some will mark this as duplicate, but I think the combination with text-overflow:ellipsis makes this unique - I really searched for a solution.
Sounds like you want a fixed-fluid-fixed layout here is how you do it in pure css. If its not what you mean let me know. a Fiddle to view: http://jsfiddle.net/rE2NC/ just move the viewport left and right and you will see how the middle expands contracts as the width does.
HTML
<div class="FooterContainer">
<div class="Footer">
<div class="Left">Left</div>
<div class="Middle">Middle</div>
<div class="Right">Right</div>
</div>
</div>
CSS
.FooterContainer {
width:100%;
}
.Footer {
padding-left:200px; //or whatever width you want the .Left to be
padding-right:200px; //or whatever width you want the .Right to be
}
.Left {
width:200px; //Should match the padding-left of .Footer
margin-left:-200px; //Should be the negative of the width
float:left;
}
.Right {
width:200px; //Should match the padding-right of .Footer
margin-right:-200px; //Should be the negative of the width
float:left;
}
.Middle {
width:100%; //This fills the rest
float:left;
overflow:hidden; //use this to make sure text dont flow out
}
jQuery Solution
I started with a jQuery assisted solution.
The CSS looks like:
div {
width: 100%;
overflow: auto;
}
a {
border: 1px solid gray;
margin: 3px;
height: 50px;
float: left;
}
.c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d {
float: right;
}
and the jQuery function:
$("div").each(function(){
var innerWidth = 0;
$(this).find("a").not(".flex").each(function(){
innerWidth += $(this).outerWidth(true);
});
var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */
$(this).find(".flex").width(flexWidth);
});
There is a hard coded constant that represents the left/right padding and border on the flexible with div (a.c in your example), and for some reason, there is a 1px adjustment to keep the floats on a single line. (Not quite sure the origin...).
Fiddle: http://jsfiddle.net/audetwebdesign/HmvsN/
Mix of Fixed Widths with Floats
I made a slight adjustment to the HTML as follows (move a.d in front of a.c):
<div class="ex2">
First column
Second column
Last column
Very long text...
</div>
and use the following CSS:
.ex2 a {
border: 1px solid gray;
margin: 3px;
height: 50px;
}
.ex2 .a {
width: 90px;
float: left;
}
.ex2 .b {
width: 90px;
float: left;
}
.ex2 .c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin: 3px 100px 3px 199px;
}
.ex2 .d {
width: 90px;
float: right;
}
Essentially, float the left two elements and the right one such that it wraps around the wider one. The width of the wider element has left/right margins to accommodate the floated elements.
Overall, both approaches have merit, but it seems to be a lot of work for what we are getting...
im making a self financial accounting program but im gonna use html,css and php to do it
i have a basic layout with 5 main divs on the front page
here it is the mock:
http://s24.postimage.org/le9yrx4np/divs.jpg
i never coded before and im failing hard
i want this layout compatible with "desktops" this is my desktop version
im working based on a 1024 x 768 screen
but i want webkits compatible for all browsers because i want this able to resize if its a little bigger or smaller
im not sure if need em since i can just set things to like 100% but thats where my problem starts
here is my work so far
http://jsfiddle.net/dhJPS/
my prblems are
the middle three divs are being overlapped by the right div, notice on the words how they are not centered from the left div to the right div
i cant seem to understand the concept of floating to well i cant make this layout work like i want
anyways if you can help me out a little with this one is greatly appreciated!!
thanks
#leftside {
background-color: blue;
width: 170px;
height: 770px;
float: left;
}
#intab {
background-color: yellow;
width: 100%;
height: 297px;
}
#currentday {
background-color: white;
width: 100%;
height: 170px;
}
#outtab {
background-color: yellow;
width: 100%;
height: 297px;
}
#rightside {
background-color: black;
height: 770px;
width: 200px;
float: right;
margin-top: -765px;
}
* {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
text-align: center;
display: block;
}
img {
border: none;
}
You simply need to rearrange some things.
When floating something to the right, the HTML always need to come before any other HTML. Right, left, static is the best order to follow.
You always want to cascade your CSS. Put global styles at the top of the style sheet. The body styles should be at the top of your CSS, not the bottom.
I added a wrapper div to set a minimum width. This way the interior content will never go below that width, ensuring things never overlap. However they will expand as much as needed.
It is rare you need to set width: 100%; in the CSS. It's not always a bad thing, but you shouldn't bother setting that unless you specifically know you need it.
I rearranged some things, and removed some of the HTML that jsFiddle don't need.... UPDATED FIDDLE HERE
Here is your answer.
Key issues:
margin
inner div to group all the central ones
[VERY IMPORTANT] display: inline-block; - This will make sure that your div will be the exact size you defined. if not used it will use 100% for both width and height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.panels {
height: 768px;
}
.rightside, .leftside {
width: 170px;
height: 100%;
background-color: yellow;
display: inline-block;
}
.leftside {
float: left;
}
.rightside {
float: right;
}
.innerPanels {
height: 100%;
margin: 0 170px;
}
.intab, .outtab {
height: 25%;
background-color: lime;
opacity: 0.75;
}
.currentday{
height: 50%;
background-color: darkgray;
}
</style>
</head>
<body>
<div class="panels">
<!--LEFT SIDE -->
<div class="leftside">left side</div>
<!-- RIGHT SIDE -->
<div class="rightside">right side</div>
<div class="innerPanels">
<!-- IN -->
<div class="intab">in</div>
<!-- CURRENT DAY -->
<div class="currentday">current day</div>
<!-- OUT -->
<div class="outtab">out</div>
</div>
</div>
</body>
</html>
I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.
I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?
Basically, my question is how can I get some space between topleft and topright?
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(0,178,219);
}
.topright {
height: 200px;
width: 300px;
vertical-align: middle;
display: table-cell;
border-radius: 15px;
background-color: rgb(134,197,73);
}
My HTML is simple:
<div class="wrapper">
<div class="topleft"> ENERGY </div>
<div class="topright"> MINERALS </div>
</div>
Check out this jsfiddle
http://jsfiddle.net/peter/YmKc4/
Updated CSS
.wrapper {
margin: 0 auto;
width:600px;
}
.topleft {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(0,178,219);
float:left;
line-height:200px;
margin:0 5px 0;
}
.topright {
height: 200px;
width: 280px;
border-radius: 15px;
background-color: rgb(134,197,73);
float:left;
line-height:200px;
margin:0 5px 0;
}
When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side
your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?
I am new to css and try to understand the box model.
So far my understanding is block level elements have a break at start and end.
If i create following html structure
<div class = "outerDiv">
<div class = "innerDiv">
</div>
If i set the background image for both of them then both image appears in one line.
.outerDiv {
background: url(/img/bottom-right.gif) no-repeat right bottom;
padding-bottom: 1em;
}
.innerDiv {
background: url(/img/top-left.gif) no-repeat left top;
}
div {width : 20px;}
They both appears in one line.
If I add text to both the divs, then they appears in different lines
Sorry my question is -
Does empty div with width settings (they are block level elements) do not behave as block level elements, as do not include break as the start and end of the element.
Thanks,
Daljit Singh
<div class = "outerDiv">
<div class = "innerDiv"></div>
</div>
.outerDiv {
background: black;
padding-bottom: 1em;
width: 100px;
height: 100px;
}
.innerDiv {
background: white;
left: 20px;
top: 20px;
width: 20px;
height: 20px;
position: absolute;
}
The key is the position: absolute :) it will put the innerdiv inside the outerdiv :)
top and left adjusts where the location of the innerdiv is in the outerdiv
width and height you probably already know :)
You can see a fiddle example here: http://jsfiddle.net/42Duf/
Above is a screenshot of what I'm trying to accomplish. I tried setting height:100%, but I get an "overflow" caused by having margin-top:48px, causing me to scroll down even though the content fits on 1 screen.
Right now the content is only up to the colored part (I edited it out for clarity).
It's CSS is:
#main_area {
float: left;
width: 600px;
margin-top: 48px;
padding: 0px 20px;
}
.sidebar { /* this one here */
float: left;
left: 10px;
width: 278px;
padding-top: 48px;
padding-right: 20px;
padding-left: 20px;
background-color: #FFFFFF
}
Alas, floated DIV's are not a good solution for what you're trying to achieve - this is one of those situations where you're going to have to revert to using a multi-column TABLE or get funky with Javascript.
Remember - when you float a DIV, it is essentially removed from the page flow layout and is floated over the page's contents. Setting the height to 100% won't set the height of your column to the height of the page it floats over - it sets the height of the floated DIV to the combined height of the floated DIV's contents.
There's a pretty good description of this in "Head First HTML" from O'Reilly.
To be honest, if you want to create really controllable multi-column page designs, TABLEs are likely to be your best bet.
I find something wrong with below css ,can you fix this first.
you gave left as 10px , but didn't mention as absolute , do you want this as absolute..??
and from the screenshot , i didn't get what exactly you want can you explain it more
.sidebar { /* this one here */
float: left;
left: 10px;
width: 278px;
padding-top: 48px;
padding-right: 20px;
padding-left: 20px;
background-color: #FFFFFF
}
do the below code in window resize event
var docHeight = Math.max(
$(document).height(),
$(window).height(),
/* For opera: */
document.documentElement.clientHeight
);
var docWidth = Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
$("#yourdiv").css({
"height":docHeight,
"width":docWidth
});
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # https://github.com/gutierrezalex/two-column-layout