I want to achieve this particular display by CSS:
I need to put there various texts and the lines to fill the white space that is left on right and left.
So far I got to this http://jsfiddle.net/g5jtm/, however there are several issues that I encounter:
the width of the text is variable and if I get out the width:40%; it will reset the width of the other 2 lines
The display:table does not allow me to align the lines through the middle of the text
HTML:
<div class="container">
<div class="lines l1"></div>
<div class="copy">Consumer review</div>
<div class="lines l2"></div>
</div>
CSS:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
.l1,.l2 {border-bottom:1px solid red; height:50px; }
Here's one way with pseudo-elements
Codepen Demo
HTML
<div class="wrapper">
<h1 class="line">Consumer Review</h1>
</div>
CSS
.wrapper {
width:50%;
margin:0 auto;
}
.line {
display: table;
white-space: nowrap;
}
.line:before,
.line:after {
background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center / 98% 3px;
content: '';
display: table-cell;
width: 50%;
}
How about a horizontal line tag
html:
<div class="container">
<div class="lines l1"><hr></div>
<div class="copy">Consumer review</div>
<div class="lines l2"><hr></div>
</div>
css:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
hr {color:red}
Related
I'm trying to keep the rotated block to align on top of remaining blocks in the right side of the window.
fiddle: https://jsfiddle.net/8tbL6rqs/1/
<div class="side">
<div class="block-first">Chat with us</div>
<div class="block">Phone</div>
<div class="block">Mail</div>
<div>
.side {
position:absolute;
right:0px;
margin-top:30%;
}
.block, .block-first {
background: #f00;
display: block;
height: 50px;
width:50px;
text-align:center;
line-height:50px;
}
.block-first {
width:200px!important;
transform: rotate(-90deg);
}
Add the following css to .block-first:
position:relative;
top:-75px;
left:-75px;
Here's an updated fiddle.
All:
Right now, I want to implement a horizontal scroll header bar. The layout I used is:
<div id="header_cnt">
<div id="header_mn">
<div class="mn_item">KWD1</div>
<div class="mn_item">KWD2</div>
<div class="mn_item">KWD3</div>
<div class="mn_item">KWD4</div>
<div class="mn_item">KWD5</div>
</div>
</div>
And the style:
#header_cnt {
width:100%;
height:60px;
position: fixed;
}
#header_mn {
background-color: lightyellow;
width:100%;
height:60px;
overflow: hidden;
padding:0px;
}
#header_mn .mn_item {
display:inline-block;
width:200px;
}
The effect I want for first step is:
The header menu fix to top, and all menu items sit in one line and the overflow part get hidden rather than wrap to next line.
[UPDATE] I figure out myself, the way I find out is using FLEXBOX:
Forget structure above,just use some new but similar structure:
<head>
<style>
body, html {
padding:0px;
margin:0px;
}
section {
border: 1px solid gray;
/*padding: 1em;*/
height:300px;
width:100%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content:flex-start;
position:fixed;
overflow: auto;
}
div {
min-width: 250px;
height: 50px;
border: 1px solid steelblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
Thanks
You could use flexbox to create this header, check it out here You can also check out flexbox here
CSS
#header_cnt {
width:100%;
height:60px;
position: fixed;
background:#d7d7d7;
}
#header_mn {
background-color: beige;
width:100%;
height:60px;
overflow: hidden;
padding:0px;
display:flex;
flex-direction:row;
justify-content:space-around;
}
#header_mn .mn_item:first-child{
margin-left:10%;
}
#header_mn .mn_item {
display:inline-block;
width:200px;
align-self:center;
justify-content:center;
}
Hope this helps
You need to float:left on those .mn_item
I still don't have Reputation to comment, so here is my tip.
You can set min-width of #header_mn to a multiple of .mn_item.
I am working on responsive design. I have div (WebPage_NavigationWrapper) and inside I have floating-left divs (function_block). Now I want to scroll bar in case floating divs cannot adjust in single line; meaning main div height remain same. Due to responsive design I am not using PX so I believe I am not providing height of div, unless I am wrong!
<div id="WebPage_NavigationWrapper" class="TitleHeaderBar_Style_L2">
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
<div class="function_block">
New-Award
</div>
</div>
</div>
CSS
#WebPage_NavigationWrapper{
display: table;
table-layout: fixed;
width:100%;
padding:10px;
overflow-x: scroll;
}
.function_block{
float:left;
padding:2px;
width:120px;
height:60px;
}
.function_block:hover{
background-color:#CDE5F2;
}
.CreateNewEntry_Icon{
margin-left:10px;
width:85px;
line-height:5;
display:inline-block;
background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top center;
}
i think this will help you,
replace your code with following
#WebPage_NavigationWrapper{
width:400px;
height: 100px;
padding:10px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid black;
}
.function_block{
display: table-cell;
padding:2px;
width:120px;
height:60px;
}
i am attempting to align 3 sub-div elements in one line, first element with left floating, third - with right and 2nd - centered.
Below my draft. What I have missed?
http://jsfiddle.net/yDzL9/
In my real e-shop the problem is in aligning of 2nd div which contains input (button), but in jsfiddle's example the problem with the third div.
Use display: inline-block for all sub elements and set white-space: nowrap; property to parent div.
Example-
HTML:
<div id="container">
<div class="wishlist">
</div>
<div class="cart">
</div>
<div class="compare">
</div>
</div>
Method 1 (Without Floated div):
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
}
#container div{
display: inline-block;
width:100px;
height:26px;
}
Working Example
Method 2 (With Floated div)
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
text-align: center;
}
#container div{
display: inline-block;
width:50px;
height:26px;
}
.wishlist{
background-color:blue;
float: left;
}
.cart{
background-color:black;
}
.compare{
background-color:red;
float: right;
}
Working Example
Using the display: flex css rule it will work as you want it to!
HTML:
<div id="container">
<div class="wishlist"></div>
<div class="cart"></div>
<div class="compare"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
#container {
height:26px;
width:300px;
padding: 10px;
display: flex;
background-color:green;
}
#container > div {
height: 90%;
width: 90px;
}
.wishlist {
float: left;
background-color:blue;
}
.cart {
margin: 0 auto;
background-color:yellow;
}
.compare {
float: right;
background-color:red;
}
As shown in this jsfiddle, and here is another one.
I have one content div with 960px of width and margin 0 auto (centralized), i want put one div occupying all the space of the left margin, how can i do that?
demo jsBin
#container{
position:relative;
width:300px;/*change this*/
margin:0 auto;
height:200px;
background:#cf5;
padding-left:50%;
margin-left:-150px; /*half the width*/
}
#centered{
width:300px;
height:100%;
position:absolute;
right:0px;
background:#eea;
}
HTML:
<div id="container">
<div id="centered">centered</div>
</div>
HERE: http://jsbin.com/oluwos/3/edit is another way to do it.
Use display: table, like this:
http://jsfiddle.net/yVFzh/
<div class="wrapper">
<div class="left-column"> </div>
<div class="centre"></div>
<div class="right-column"> </div>
</div>
html,
body{
width:100%;
}
.wrapper{
display:table;
width:100%;
}
.wrapper > div{
display: table-cell;
background: blue;
height:400px;
}
.wrapper .centre{
width: 960px;
background: yellow;
}