Divs don't merge - html

I have this layout:
I am trying to make the div with a slideshow, this above the red thing, be above the section of header.
I tried z-index, and a lot of other ways, but cannot get the layout to work.
This is my code:`
<div id="box">
<div class="clear"></div>
<div id="slideshow">
<ul>
<li>
<img src="imagens/1.png" alt="Curso 1" class="banner" />
</li>
<li>
<img src="imagens/2.png" alt="Curso 2" class="banner" />
</li>
<li>
<img src="imagens/3.png" alt="Curso 3" class="banner" />
</li>
<li>
<img src="imagens/4.png" alt="Curso 4" class="banner" />
</li>
</ul>
</div>
<div class="clear"></div>
<div id="header">
<div id="logo">
<img src="imagens/logo.png" id="" />
</div><!--logo-->
<div id="menu">
<ul>
<a class=""><li>HOME</li></a>
<a class=""><li>PROGRAMAÇÃO</li></a>
<a class=""><li>PALESTRANTES</li></a>
</ul>
</div>
</div><!--header-->
</div>
And this CSS:
.clear {
clear: both;
}
#box {
width:980px;
margin: 0 auto;
background-color:red;
}
#header {
z-index: 3;
}
#slideshow {
height:286px;
width:980px;
z-index: 0;
float: right;
}
#slideshow ul {
list-style: none;
}
#slideshow img {
overflow: hidden;
height:286px;
width:980px;
}
What can I do to solve this?
I'm trying to do something like this:

I think by "merge" you mean overlap.
To make the logo and navigation (#header) overlap the slideshow (#slideshow) above it, you will need to put a negative top margin on #header. You also need to add position to an element in order for z-index to work.
#header {
position:relative;
z-index: 3;
margin-top:-200px;
}
Once you do this, you may need to increase the z-index property of #header in order for it to get to overlap your slideshow.

Related

Position div in navbar vertically center and to the right

I have a lot of links in a navbar. Most of the links are positioned to the left. I want to position some of the links to the right (right-side-login-cart). The part that is giving me trouble is that I can get the links to the right, but then cannot get the links to vertically align.
I've tried a bunch of different things to get it to work. For instance, I have float:right;, used transform to translate Y, and tried to used vertical align.
Some different attempts:
HTML
<div class="links-at-top">
<div class="links-div">
<a href="/">
<img src="example.com/img">
</a>
Link1
Link2
</div>
<div class="right-side">
<div class="positioning">
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
Attempt 1:
CSS:
.right-side {
padding-right: 50px;
display: inline-block;
}
.positioning {
position: absolute;
right: 0;
transform: translateY(-50%);
}
Attempt 2:
CSS:
.right-side {
padding-right: 50px;
display: inline-block;
}
.positioning {
vertical-align: middle;
}
Add your .right-side div into the same div as your other links so that they'll be on the same line. Then you can just float right.
.links-div {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="links-at-top">
<div class="links-div">
<div>
Link1
Link2
</div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" />
<div>
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
You can consider using flex-box
.links-at-top{
display: flex;
justify-content:space-between;
align-items:center;
}
<div class="links-at-top">
<div class="links-div">
Link1
Link2
</div>
<div class="right-side">
<div class="positioning">
<a id="right-link-1">RightLink1</a>
<a id="right-link-2">RightLink2</a>
</div>
</div>
</div>
make .links-div and .right-side both display:inline-block, and float the right-side to right.
<div class="links-at-top">
<div class="links-div">
Link1
Link2
</div>
<div class="right-side">
<ul class="positioning">
<li> <a id="right-link-1">RightLink1</a></li>
<li> <a id="right-link-2">RightLink2</a></li>
</ul>
</div>
.right-side {
display: inline-block;
float:right;
}
.links-div{
display:inline-block;
}

Bootstrap Footer positioning

I know that there are thousands of Topics about Footers but I still cannot ajust mine, I have tryed alot of things but nothing helped..... The footer should be always at the bottom of the page visible only when I scroll down the content.
Hope someone will have any suggestions!
This is my footer:
<div class="wrap">
......
</div>
<div class="footer">
<div class="container">
<div class="col-sm-4">
<img class="menu-icon" src="img/other/user.png"><h11>Account</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/gear.png"><h11>Support</h11>
<ul class="unstyled">
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
<li>ddd</li>
</div>
<div class="col-sm-4">
<img class="menu-icon" src="img/other/share.png"><h11>Share Us</h11>
<ul class="unstyled">
<li><img class="menu-icon" src="img/other/tw.png">Twitter</li>
<li><img class="menu-icon" src="img/other/fb.png">Facebook</li>
<li><img class="menu-icon" src="img/other/gp.png">Google Plus</li>
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
}
.wrap {
height: auto !important;
min-height: 100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height: 140px;
background-color: #222;
}
Check if the below link works with you.
Fiddle
#footer {
position: relative;
background-color: darkcyan;
color: white;
z-index: 1;
}
Im not a 100% sure what your trying to achive. but i suspect that the error might be in your css.
you are currently using:
position:absolute;
And if you want your footer to stick to the bottom of the content, you shouldnt need to manipulate the element to use absolute positioning.
Is this the issue you are facing?
this example is using position:absolute as your code suggests.
https://jsfiddle.net/pvwLu49x/1/
is this what you are trying to do?
https://jsfiddle.net/pvwLu49x/2/

Horizontal scrollbar if the content of a <div> won't fit the width

I am using an absolute div so I can overlap one div from another. The div that overlaps is the absolute one (.content). However, if the overlapped div (.left) doesn't fit the screen, a horizontal scroll bar doesn't appear of course. How can I make the horizontal scroll bar automatically appear if its contents doesn't fit the given width? Here is the css:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Please help me figure this out.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="#routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
#content
</div>
</div>
</div>
</div>
With the following css for parent.
.parent {
width: 100%;
position: relative;
}
But still doesn't show a scrollbar.
In your html left is not child of content you can't make it scroll.
If you have parent > child then just use position: relative on parent block.
Here is example http://jsfiddle.net/4swN9/

trying to resize list items so they are all equal size

I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.

How to position the image relatively

Hai I am new in html and css.I need some help.I have 4 images given below.
The main Background image
Link image1
Link image2
Link image13
And I need to look the all images finally like
Final Look
My html is like
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="/media/19134/001.jpg"/>
<img src="/media/19133/Twetter.jpg"/>?
<img src="/media/19133/facebok.jpg"/>
<img src="/media/19133/insta.jpg"/>
</div>
</div>
Can any one help on css to position the social link images.
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="http://i.stack.imgur.com/mxD7P.jpg"/>
<img src="http://i.stack.imgur.com/lBlEE.jpg"/>
<img src="http://i.stack.imgur.com/FbE0s.jpg"/>
</div>
</div>
In css:
.aside-block__content {
background: url("http://i.stack.imgur.com/msmci.jpg") no-repeat;
width: 310px;
height: 100px;
}
.aside-block__content a img{
float: right;
margin-top: 50px;
margin-right: 30px;
}
DEMO : http://jsbin.com/kexam/1/edit
You can put the "follow us" image as a background image and float the icons right with margin-top and right to position them as desired :
FIDDLE
HTML:
<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="http://i.stack.imgur.com/lBlEE.jpg"/>
<img src="http://i.stack.imgur.com/mxD7P.jpg"/>
<img src="http://i.stack.imgur.com/FbE0s.jpg"/>
</div>
</div>
CSS:
.aside-block__content {
width:314px;
height:115px;
background-image: url(http://i.stack.imgur.com/msmci.jpg);
}
.aside-block__content a{
float:right;
margin:50px 30px 0 0;
}
There are a couple of ways to do this.
You could do this by...
HTML:
<div id="wrapper"> <!-- wrapper with the background - image -->
<div id="social_media"> <!-- a container for the social media icons -->
<img class="icon" src="/media/19133/Twetter.jpg"/> <!-- Your Icons -->
<img class="icon" src="/media/19133/facebok.jpg"/>
<img class="icon" src="/media/19133/insta.jpg"/>
</div>
</div>
Css:
#wrapper { background: url(/media/19134/001.jpg) no-repeat; }
#social_media { /* Your positioning */ }
.icon { float:right; margin-left: 20px; }