I am trying to split the page into two sections. One left area and right will be the content page. I have the following html but looks like it is not working. Any ideas, what I am not doing right?
<div id="wuiMainArea">
<div id="wuiMainContent">
<div id="wuiLeftArea">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
</div>
</div>
Like this
<div id="wuiMainArea" style="border: 1px solid;">
<div id="wuiMainContent" style="border: 1px solid;">
<div id="wuiLeftArea" style="border: 1px solid;float: left;">
<div id="wuiLefthandNavRoot">
<h2 class="wui-hidden">Section Navigation</h2>
<h3 class="wui-navigation-title"><p>Applications</p><p> </p></h3>
<div id="tree" style="float: left; width: auto; background-color: #f2f4f5;"> </div>
</div>
</div>
<div id="wuiInpageNav" style="border: 1px solid; float: left;">
<div class="wui-inpage-container" id="in_100">
<p>This is the div I will be using for charts </p>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
#wuiMainArea, #wuiMainContent{
margin: 0 auto;
width: 960px;
}
#wuiLeftArea, #wuiInpageNav{
/* use half of the main content div's width */
/* -2 because of 1px-border on both sides */
width: 478px;
display: inline-block;
float: left;
}
It'll be better to use CSS styling HTML.
Define the widths to fit your needs. Also I recommend using classes instead of ids when appling same styles to multiple elements.
Related
I have a html table, which shows informations about a movie.
I am trying to change this table to a div layout because of the responsiveness. With table when I reduce the window widht, the text overlaps.
this is my table:
.label{
font-weight: bold;
text-align: right;
}
.blue-box{
background-color: green
}
<div class="blue-box">
<table>
<tr>
<td class="label">Nome:</td>
<td>Del Toro</td>
<td class="label">Data de cadastro:</td>
<td>19/05/2017</td>
<td class="label">Data de atualizacao:</td>
<td>19/05/2017</td>
</tr>
<tr>
<td class="label">Categoria de produto:</td>
<td>Diverso</td>
<td class="label">Ultimo Prêmio:</td>
<td>Leão De Ouro</td>
<td class="label">Filme Indicado</td>
<td>Shape of Water</td>
</tr>
</table>
<div>
</div>
with divs I was able to do much of the transformation, but with the labels itself, I can't figure out a way to align the labels like when I use the table layout:
.label{
font-weight: bold;
float: left;
text-align: right;
display: inline;
margin-right: 5px
}
.blue-box{
background-color: aquamarine;
overflow: hidden;
}
.father{
float: left;
margin: 0px 5px 0px 5px ;
}
.content{
float: left;
display: inline;
}
<div class="blue-box">
<div class="father">
<div class="label">
Nome:
</div>
<div class="content">
Del Toro
</div>
</div>
<div class="father">
<div class="label">
Data de cadastro:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Data de atualizacao:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Categoria de produto:
</div>
<div class="content">
Diverso
</div>
</div>
<div class="father">
<div class="label">
Ultimo Prêmio:
</div>
<div class="content">
Leão de Ouro
</div>
</div>
<div class="father">
<div class="label">
Filme indicado:
</div>
<div class="content">
Shape of water
</div>
</div>
</div>
What I'm missing? There's no way to achieve this with only HTML?
First of all, if responsiveness is what you're after, you need to find the way to employ a responsive framework, Boostrap or Material UI (flexbox base) This will solve a lot of your problems at different brakpoints of the viewport without bloating your stylesheet with media queries. Second, you need to modify your HTML to allow for compartmentalization of containers. Responsiveness works best when you use compartmentalization and specificity.
Here is how I would rework your HTML and solve the alignment issue with fair amount of CSS
.row {
width: 100%;
display: inline-block;
margin: 10px auto;
background: green;
}
.col4 {
display: inline-block;
width: 33.33333333%;
margin: 1% 0 1% 0;
position: relative;
padding-right: 15px;
float: left;
padding-left: 15px;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col4 div{
display: inline-block;
}
label{
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
<div class="row">
<div class="col4">
<div>
<label>Nome:</label>
<span>Del Toro</span>
</div>
<div>
<label>Categoria de produto:</label>
<span>Diverso</span>
</div>
</div>
<div class="col4">
<div>
<label>Data de cadastro:</label>
<span>19/05/2017</span>
</div>
<div>
<label>Ultimo Prêmio:</label>
<span>Leão De Ouro</span>
</div>
</div>
<div class="col4">
<div>
<label>Data de atualizacao:</label>
<span>19/05/2017</span>
</div>
<div>
<label>Filme Indicado:</label>
<span>Shape of Water</span>
</div>
</div>
</div>
See the example here in my CODEPEN (just change the values in your HTML)
Now, here is one with Bootstrap. Check out how I was able to produce the same and IT IS RESPONSIVE without making any additional media queries. Just by using the classes container, row, and col-xs-12 col-sm-4
Boostrap is very documented here
muito fácil, né!
.blue-box{
background: green;
padding: 1rem;
}
.father{
display: inline-block;
margin: .5rem;
}
.label{
font-weight: bold;
float: left;
width: 80px;
}
.content{
float: left;
width: 70px;
}
<div class="blue-box">
<div class="father">
<div class="label">
Nome:
</div>
<div class="content">
Del Toro
</div>
</div>
<div class="father">
<div class="label">
Data de cadastro:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Data de atualizacao:
</div>
<div class="content">
19/05/2017
</div>
</div>
<div class="father">
<div class="label">
Categoria de produto:
</div>
<div class="content">
Diverso
</div>
</div>
<div class="father">
<div class="label">
Ultimo Prêmio:
</div>
<div class="content">
Leão de Ouro
</div>
</div>
<div class="father">
<div class="label">
Filme indicado:
</div>
<div class="content">
Shape of water
</div>
</div>
</div>
You can achieve almost the same result as table using DIV and CSS,
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Gross but sometimes useful.
</div>
</div>
</div>
have a look at https://css-tricks.com/almanac/properties/d/display/
the advantage of using this is that you have some extra features like vertical-align having it set up like this.
if you want me to modify your code to something like this. give me a buzz.
I need to create a kind-of 'outter' container of images to surround a div which contains text. Please see the attached image for a rough idea of what i'm trying to achieve. I've tried using columns with bootstrap but I'm unable to create the image overlap effect (on the right-hand side).
<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>
<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>
<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>
<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>
But this obviously causes problem with the long image on the right-hand side.
Any ideas how to complete this with CSS?
Any help would be greatly appreciated. Thanks
I would do it as 3 columns, although you haven't described how you would like this to look on smaller screens as the columns will collapse in order. The below snippet is a rough example of what you could do.
.padded {
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
<!-- Text (Middle) -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="text-center">
<img src="http://via.placeholder.com/200x100" class="padded" />
</div>
<div class="panel">
This is the text This is the text
</div>
</div>
<!-- Right Column -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x200" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
</div>
</div>
Alright, from what i can get, you need to arrange the images kind-of as an inverted 'U'- shaped and place the text in the between of the two side images. The idea is to float the images left or right accordingly and then set the display of the text as inline-block.
The following code places 4 boxes in an arrangement as asked in the question, you can align them as you want using margin-left property.
NOTE This arrangement is only possible if the boxes/divs are wide enough, so make sure to adjust the widths of each div. Not necessarily as i have done you can change it as you wish, just make sure that the boxes are wide enough to fill in the page or the arrangement will not show up.
#top{
display: inline-block;
height: 20%;
width: 50%;
background-color: red;
}
#left{
height: 50%;
width: 25%;
float: left;
background-color: blue;
}
#text{
height: 50%;
width: 50%;
background-color: green;
text-align: center;
float: left;
}
#right{
height: 50%;
width: 25%;
background-color: yellow;
float: right;
}
<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>
EDIT Don't know why stackOverflow is not able to show the result on running this code, but i suggest you copy it and run it manually, it will show something like the image attached.
Something like this?
.left-container, .right-container {
width: 60px;
float: left;
}
.center-container {
float: left;
}
.img-small {
width: 40px;
height: 40px;
margin: 10px;
background-color: green;
}
.img-big {
width: 40px;
height: 80px;
margin: 10px;
background-color: green;
}
.img-wide {
width: 80px;
height: 40px;
margin-top: 10px;
background-color: green;
}
.text {
width: 80px;
height: 120px;
margin-top: 10px;
background-color: blue;
}
<body>
<div class='left-container'>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
<div class='center-container'>
<div class='img-wide'></div>
<div class='text'></div>
</div>
<div class='right-container'>
<div class='img-small'></div>
<div class='img-big'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
</body>
How to align the below image and box in same row? Image on left and box on right with some space between them.
<div id="slideshow" >
<div id="changeimage">
<img class="image" src="bafdf1f214f5a800c95ef301234c254a.iix"/>
</div>
<div id="newsbox">
<span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
</div>
Like #ntgCleaner said: "there's about 20 ways to skin that cat."
This might be one way to achieve this:
#slideshow {
display: flex;
}
.group-box {
margin-top: 50px;
}
<div id="slideshow" >
<div id="changeimage">
<img class="image" src="//thumb7.shutterstock.com/display_pic_with_logo/260389/347420135/stock-photo-top-view-of-architect-drawing-on-architectural-project-347420135.jpg"/>
</div>
<div id="newsbox"><span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
</div>
You can use "float" or "display: inline-block" css selectors to set your elements this way. I belive this simple example will help:
<style>
#slideshow{
border: 1px solid black;
width: 100%;
}
#changeimage{
float: left;
background: blue;
width: 40%;
}
#newsbox{
float: left;
background: red;
width: 40%;
}
#separator {
width: 20%;
height: 100px;
float: left;
background: green;
}
.clear{
clear: both;
}
</style>
<div id="slideshow" >
<div id="changeimage"><img class="image" src="http://www.w3schools.com/html/pic_mountain.jpg"/></div>
<div id="separator"></div>
<div id="newsbox"><span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
And here is working example:
https://jsfiddle.net/ej53b8x2/
If you want to set elements in row maybe you should use some framework like bootstrap or foundation?
How do I align the div so that both label has the same width and right aligned and both content start at the same place. Some suggest float, but I dont perfer floating the content. Is there a flex way of doing this.
<!DOCTYPE HTMML>
<html>
<body>
<div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
Long label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
</div>
</body>
</html>
With flexbox...NO...you can't unless you use fixed width values (whatever they are)...there is no width/height equalisation between non-siblings.
You would need to given one of the elements a fixed width value and then let the other take up the remaining space with flex:1.
.blue {
background: lightblue;
/* width: 150px; */
flex: 0 0 150px
}
.green {
background: #bada55;
flex: 1;
}
.parent {
display: flex;
}
<div class="parent">
<div class="blue">
Long label:
</div>
<div class="green">
This is the content
</div>
</div>
<div class="parent">
<div class="blue">
label:
</div>
<div class="green">
This is the content
</div>
</div>
Why not simply add a class to the content and label divs?
HTML
<div>
<div>
<div class="label-div">Long label</div>
<div class="content-div">Content</div>
</div>
<div>
<div class="label-div">Label</div>
<div class="content-div">Content</div>
</div>
</div>
CSS
.label-div {
width: 70px;
text-align: right;
}
.content-div {
text-align: left;
}
This way, you can be sure that all label divs are equal in length.
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;