I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
Related
I have a problem I just can't seem to solve despite following directions in my previous post, I just began learning html/css. This is my button as it appears right now:
here
& this is where I would like it to appear. It does not seem to move despite changing the top, left or bottom:
here
& this is where I want it to be. The background is simply an image its not multiple divs. this is the only code I have:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style{
top: 100px;
right: 1000px;
left: 10000000px;
}
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
></img>
</section>
I think you should use left, top etc. styles with percentages. If we look at the center of the button in the second picture:
top: 35%, left: 60%
Also, you should change display to block in order to see the button as a rectangle element. I gave also width and height. You can change them if you want.
So, I changed your HTML code as:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button
style="position: absolute; display: block; top: 35%; left: 60%;
width: 120px; height: 60px;">
Try yourself
</button>
</p></div>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
These are the screenshots:
There are a few mistakes in your HTML. Firstly, the style attribute needs to be a string. The position attribute needs to be first. So it would be "position: absolute;top: 100px;right: 1000px; left: 10000000px;". img tags do not have a closing tag.
Correct HTML:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style="position: absolute;top: 100px;right: 1000px; left: 10000000px;"
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
I am having some issues trying to display my <div checkoutoptionsto the right and my <div productdetailsto the left of checkoutoptions
Here is how it is displaying now:
Here is how I would like it to display
It looks like there is some kind of wrapping around the div checkoutoptionsthat won't let me move the div productdetails upbut I have not idea how to correct the issue.
Here is a link to my website as an example if you would like to see it first hand.
Here is my HTML:
<!-- Share and title/show this panel on top -->
<div class="ProductMain" style= "float: left; ">
<h1 itemprop="name">%%GLOBAL_ProductName%%</h1>
%%GLOBAL_FacebookLikeButtonAbove%%
%%GLOBAL_FacebookLikeButtonBelow%%
%%GLOBAL_PinterestButton%%
<!--side panel with add to cart show this panel to the right-->
<div id="checkoutoptions">
%%SNIPPET_ProductAddToCartRight%%
<div><input id="ShopButton" style="display: none";></div>
%%SNIPPET_ProductAddToCartBelow%%
%%Panel.SideProductAddToWishList%%
<div class="WishlistRow DetailRow" style="display:%%GLOBAL_HideWishlist%%">
<a class="WishListButton" href="javascript: void(0)">ADD TO WISHLIST</a>
</div>
%%GLOBAL_AddThisLink%%
</div>
<!--Yotpo Reviews/ display this panel next to checkoutoptions to the left and right under ProductMain-->
<div id="productdetails">
<div style="padding: 0px 0px 0px; width: 200px; margin: auto; height: 00px"> </div><!--yotpo product rating-->
<div class="yotpo bottomLine"
data-product-id="%%GLOBAL_ProductId%%"
data-url="%%GLOBAL_ProductLink%%">
</div>
<div class="ProductDetailsGrid">
<div class="DetailRow RetailPrice" style="display: %%GLOBAL_HideRRP%%">
<span class="Label">%%LNG_RRP%%:</span>
%%GLOBAL_RetailPrice%%
%%GLOBAL_YouSave%%
</div>
</div>
Here is my CSS so far:
#checkoutoptions{
margin:auto;
padding: 10px;
border-radius: 5px;
width: 310px;
border: 1px solid gray;
}
Switch place on the div with review and the div with product info. Result will be like
<div class="yotpo bottomLine yotpo-medium" data-product-id="705" data-url="" data-yotpo-element-id="2">
..... content
</div>
<div class="ProductDetailsGrid">
....content
</div>
should instead be rearranged to
<div class="ProductDetailsGrid">
....content
</div>
<div class="yotpo bottomLine yotpo-medium" data-product-id="705" data-url="" data-yotpo-element-id="2">
..... content
</div>
Doesn't look exactly like you wished for, but I believe it's quite good.
Actually the order/structure of elements is not good. You should restructure your html and create small containers for each section.
For example.
<div class="post-meta">
<div class="share-box">
<div class="share-buttons"><!-- fb and pinterest buttons --></div>
<div class="product-price-rating"><!-- item price, rating etc --></div>
</div>
<div class="cart-box">
<!-- cart and other code -->
</div>
<div class="clearfix"></div>
</div>
Now you can easily achieve the layout you want by floating each box and clearing float before closing parent.
.share-box{
float: left;
}
.cart-box{
float: right;
}
.clearfix{
clear: both;
}
Add to your css class:
display: inline-block;
Code here - http://jsfiddle.net/Cd2Ek/
html -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
If you see the output in jsfiddle, the bars are going below the main-div. I think you can guess the actual requirement, all bars should be position from bottom, and if the % is 50, then frm bottom, bar should be upto 50% height of the main div, along with label, % indication.
I think this is what you need - fiddle. I've rearranged your code quite a lot to simplify how it works, but basically it uses absolute positioning to get the bars to stick to the bottom. Please let me know if anything is unclear.
Each bar now uses the HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
Change your css with below one
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
Try above code...
CSS
You missed aligning the bars add this line in you .sub-div css class
vertical-align: top;
DEMO
i am trying to reduce the the width of slider using boot strap responsive css to display it in iphone
but i am not able to do it
can you please help me with it
http://jsfiddle.net/CXkQp/4/
screenshot
https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit
providing my code below
<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
<div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
<div class="bx-window" style="position:relative; overflow:hidden; width:100%">
<div class="container">
<div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-toleft" style="width: 100%">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
</div>
<div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
<h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
<div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
</div>
<nav class="da-arrows" style="width: 100%">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
</div>
</div>
</div>
</div>
A couple of points to get you started. In your jsFiddle, there doesn't seem to be a closing tag for your container div # line 120.
Also you want your slider to scale but it's not inside a fluid row div. I think your bootstrap grid needs work. Check the structure for fluid grid carefully: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
Hope this helps.
I have a simple web form with following div order.
<div id="outer" style="width:100%;height:100%">
<div id="navigation" style="width:20%;min-height:400px; float:left"></div>
<div id="expand-collapse" style="width:1%" heigth:30px; float:left"></div>
<div id="content" style="width:79%" min-heigth:400px; float:left"></div>
</div>
note:
expand-collapse is containg a image.once i click on this content area is going to be expanded and next time it will collapse.
my problem is , when the page is displaying in defferent resolutions "expand-collapse" area get different different width. i know tht width of this should be going to with pixels insted of percentage.
I need to give different width for navigation and content area and fixed width for "expand-collapse" div.
is there any to handle this situation ?
thanks in advance
<div id="outer" style="width:100%; height:100%">
<div id="navigation" style="width:20%; min-height:400px; float:left"></div>
<div id="expand-collapse" style="width:10px; height:30px; float:left"></div>
<div id="content" style="min-height:400px; overflow:hidden;"></div>
</div>
Your style attributes aren't well-formed.
For the fix I simply add a new formatting context to #content: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
It is not easy when you mix pixel widths with percentages. But you can always improvise:
<div id="outer" style="width:100%; height:100%">
<div id="navigation" style="width: 20%; float: left; min-height: 400px; background-color: #F00;"></div>
<div id="content-wrapper" style="width: 80%; float: left;">
<div id="expand-collapse" style="width: 10px; float: left; background-color: #0F0; height: 30px;"></div>
<div id="content" style="margin-left: 10px; float: none; background-color: #00F; min-height: 400px;"></div>
</div>
</div>
Demo here