I have designed picture 1 in PhotoShop which is what I was planning in the HTML.
I added the float to all elements but for some reason I don't understand it starts breaking the divs (picture 2)... am I missing something obvious here?
[![enter image description here][1]][1]
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86" />
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42" />
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png" />
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" />
</div>
</div>
The alignment is off because of the size of Read From First Page and Jump To Last Page images. Giving width to the images will place it to the side of left container.
Also use display:inline-block with vertical-align:middle to align the container vertically into middle.
Here is the link that explains the use of display:inline-block
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Have modified your html code
<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
<div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
<a href="/Main/">
<img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86">
</a>
</div>
<div style="float:right;margin-top:10px;border: 1px solid black;">
<img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42">
</div>
<div style="clear:both;"></div>
<div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
<img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496">
</div>
<div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;display: inline-block;vertical-align: middle;">
<img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png">
</div>
<div style="margin-top:0px;margin-left:30px;border: 1px solid black;height: 100%;display: inline-block;">
<img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" style="
width: 230px;">
</div>
<div style="display: inline-block;margin-left:30px;border: 1px solid black;vertical-align: middle;">
<img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png">
</div>
<div style="display: inline-block;margin-top:0px;margin-left:30px;border: 1px solid black;">
<img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" style="
width: 230px;">
</div>
</div>
You have way too many divs, and you gotta adjust the margins/paddings.
Take a look at This link..
Related
Container is scrollable only for half of the container. After that scrolling starts to affect navigation panel as well.
CSS:
.horizontal-scrollable {
overflow-x: auto;
white-space: nowrap;
}
HTML:
<div class="container horizontal-scrollable" style="border: 1px solid lime;">
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
<div class="row flex-nowrap" style="border: 5px solid gold">
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
<div class="col" style="border: 1px solid red;">Column</div>
</div>
</div>
[Works, thus container is crollable while navigation is still][1]
[1]: https://i.stack.imgur.com/vYKUY.png
[Stopped working after some breakpoint, whole page is moving][2]
[2]: https://i.stack.imgur.com/IgnTZ.png
You can try to make all the row div elements as inline, using display: inline-block; property.
For your case, it would be like
.horizontal-scrollable > .row > .col{
display: inline-block;
}
Also, try changing the code from Horizontal-scrollable to the the row elements inside that div.
.horizontal-scrollable > .row {
overflow-x: auto;
white-space: nowrap;
}
I found the this to be working for me. You can reference this here.
Hi friends i am trying to make my repeater look like the img i have attached . I have achieved till the line Total cover but the 50% total cover line giving me headache in alignment. Can someone please guide me on this
<asp:Repeater ID="TreeRepeater" runat="server" DataSourceID="TreeSource" OnItemDataBound="TreeRepeater_ItemDataBound">
<ItemTemplate>
<div>
<div style="float: left; width: 15px; text-align: right;"><%# Container.ItemIndex + 1 %>.</div>
<div style="float: left; width: 230px; border-bottom: 1px solid black;margin-right:5px"><%# Eval("ScientificName") + ", " + Eval("CommonName")%></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"><%# string.Format("{0:0.##}",Eval("PercentageCover")) %></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px; vertical-align:text-bottom"><asp:Image ID="TreeDominantImg" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" Visible='<%# ((Eval("Dominant") == DBNull.Value)?(short)0:(short)Eval("Dominant")) == 1 ? true : false %>' /></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black;"><%# Eval("Indicator")%></div>
<div style="clear: both;"></div>
</div>
</ItemTemplate>
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"></div>
<div style="float: left; width: 45px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server"/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="display:inline-block; width: 100px;"></div>
<div style="display:inline-block;width:120px;">50% of total cover:</div>
<div style="display:inline-block;width:40px;border-bottom: 1px solid black;"><asp:Label ID="Label6" runat="server"/></span></div>
<div style="display:inline-block;width:120px;">20% of total cover:</div>
</div>
</FooterTemplate>
I prefer to use display: inline-block rather than float: left because if you use float: left, it will exit the current flow of the element. You can change the div in ItemTemplate to this (Just copy the style, not the entire code)
<div>
<div style="display: inline-block; width: 15px; text-align: right;">1.</div>
<div style="display: inline-block; width: 230px; border-bottom: 1px solid black;margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px;"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black;"></div>
<div style="clear: both;"></div>
</div>
and the FooterTemplate to this (Again just copy the style)
<div>
<div style="display: inline-block; width: 254px;"></div>
<div style="display: inline-block; width: 45px; text-align: center;border-bottom: 1px solid black;"></div>
<div style="display: inline-block;">= Total Cover</div>
</div>
<div>
<div style="display:inline-block; width: 44px;"></div>
<div style="display:inline-block;width:130px;">50% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
<div style="display:inline-block;width:130px;">20% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
</div>
then it will results just like in this DEMO
Note: If any of the words inside footer wrapped to a new line, just edit the width that you use.
try the following:
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"> </div>
<div style="float: left; width: 45px; height:15px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server" Text=" "/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float: left; width: 60px;"> </div>
<div style="float: left;">50% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label6" runat="server" Text=" "/></span></div>
<div style="float: left;"> </div>
<div style="float: left;">20% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label1" runat="server" Text=" "/></span></div>
<div style="clear: both;"></div>
</div>
</FooterTemplate>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 9 years ago.
I currently have this div:
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
I have tried using <div style="text-align:center;"> </div> like this:
<div style='text-align: center;'>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</div>
^ Doesn't work
I've also tried using <div style="text-align:center; display:block;"> </div> like this:
<div style='text-align: center; display:block;'>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</div>
^ Doesn't work
I've also tried using <center> </center> (even though it is not recommended...
<center>
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px;">
TEST
</div>
</center>
^ It works!!!
The only problem is that <center> is terrible to use as it is outdated! So how can I do this without using <center>
is this what you want to achieve?
http://jsfiddle.net/cancerian73/LUcUZ/
<div style="background: lightsalmon;margin-bottom: 12px; width: 600px; padding: 5px 8px;border: 1px solid #071B36;border-radius: 3px; margin:0 auto;">
TEST
</div>
I need some help figuring out why bootstrap is not spacing my columns out correctly. I created a fiddle below with the slide show row and the next row with that has the 3 columns. For some reason the three columns are flush right instead of centered like they should be.
Can anyone tell me what I am doing wrong?
<header class="header">
<div class="container">
<div class="row" id="header">
<div class="span12">
<h1> Header</h1>
</div>
</div>
</div>
</header>
<br><br>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="row">
<div id="user1" class="span4 ">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user2" class="span4">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user3" class="span4 ">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="clear"></div>
</div>
</div>
http://jsfiddle.net/yoderman94/ccnfu/
I hope I got your question right. Bootstrap class row has a margin left of about -20px. So the convention is to have an element with a class span inside it which gives it margin-left of 20px.
Your issue is not with the three boxes rather its with the row above it.
<div class="row">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
In the above code the row doesn't have a span class inside hence the image doesn't have 20px margin-left. You need to give a class say span12 to img and remove the inline style margin.
<div class="row">
<img class="span12" src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style=" border: 0px solid rgb(0, 0, 0);" />
</div>
See fiddle
Using row-fluid show-grid to locate them to middle like following
<div class="container">
<div class="row-fluid show-grid">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="row-fluid show-grid">
<div id="user1" class="span4 ">
<img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user2" class="span4">
<img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user3" class="span4 ">
<img class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="span4"></div>
<div class="clear"></div>
</div>
</div>
I hope someone can help me. I am trying to get to this:
This is what I have so far:
And below is my current html. How can I show the border on just the inner portion of the divs (like in the first screenshot)? Also, how do I make the height and width of each div a square (not rectangular)? Is it better to use an html table or is this possible using divs? The html code is dynamically being generated, so I cannot just add the right/left border on the individual divs.
<div style="width: 100%; text-align: center;">
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">M</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">T</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">W</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">R</span>
<br/>
5-7
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">F</span>
<br/>
7-5
</div>
<div style="float: left;width: 14%;background-color: #CCCCCC;border-right: 1px solid black;">
<span style="font-weight: bold;">S</span>
<br/>
0-0
</div>
<style type="text/css">
.wrapper {
width: 400px;
text-align: center;
}
span {
display:block;
}
.box {
float: left;
height:40px;
width: 40px;
background-color: #CCCCCC;
border-left: 1px solid black;
}
.box.act {
background-color:white;
}
.box:first-child {
border:none;
}
.box > span:first-child {
font-weight:bold;
}
</style>
<div class="wrapper">
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
<div class="box">
<span>M</span>
<span>5-7</span>
</div>
<div class="box">
<span>T</span>
<span>5-7</span>
</div>
<div class="box">
<span>W</span>
<span>5-7</span>
</div>
<div class="box">
<span>R</span>
<span>5-7</span>
</div>
<div class="box act">
<span>F</span>
<span>7-5</span>
</div>
<div class="box">
<span>S</span>
<span>0-0</span>
</div>
don't add border on the last div.
use padding to establish widths and heigts