I got the following HTML:
HTML:
<div class="header">
<div class="col col1">1st</div>
<div class="col col2">2nd</div>
<div class="col col3">3rd</div>
<div class="col col4">4th</div>
</div>
CSS:
.header {
text-decoration: underline;
}
.col {
width:200px;
float:left;
}
What I want do achieve is that
1st..............................2nd..................3rd...........4th
is completely underlined. (the complete row)
Demo
use CSS border-style [border-bottom][1] dashed
.col and margin together
.col {
width:200px;
border-bottom:2px dashed black;
margin-bottom:10px;
margin-left:5px;
}
DEMO full or DEMO small
full code
.header {
text-decoration: underline;
}
.col {
width:200px;
border-bottom:2px dashed black;
margin-bottom:10px;
margin-left:5px;
}
div{
float:left;
}
alternative
.header {
text-decoration: underline;
border-bottom:2px dashed black;
}
Demo
full code
<div class="header">
<div class="col col1">1st</div>
<div class="col col2">2nd</div>
<div class="col col3">3rd</div>
<div class="col col4">4th</div>
</div>
style
.header {
text-decoration: underline;
border-bottom:2px dashed black;
}
.col {
width:200px;
}
div{
float:left;
}
you can use this CSS for desire effect. Check the DEMO.
.col{display:inline-block; border-bottom:1px dashed #333333;width:100px;}
You can use border-bottom: solid 1px; instead of underline.
fiddle
are you want this
.col { width:200px;
display:inline;
float:left;
border-bottom:1px #000 solid
}
What you have in your example is text-decoration: underline on your div - this will underline the text content of that div. What we need to do is set each div to be inline-block so they sit next to each other, and add a border to the container.
Here's an example
Related
I am trying to vertically align my text in a drop down menu. I have been following the suggestion in Stackoverflow and used display: table-cell and vertical-align: middle but it does not appear to work. It just sticks each text at the top of each drop down cell.
My drop down menu is #results.
The code and CSS is as below.
<div class="container">
<div id="jumbo" class="jumbotron">
<input type="text" value="" placeholder="Search" id="keyword">
<input type="button" id="myBtn" value="Go">
<div id="results">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="col-md-12" id="trainstation" style="background-color:blue;width:100%;margin:auto;height:100px;">
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</div>
CSS
#results {
width:94%;
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color:white;
border:1px solid #c0c0c0;
display:none;
text-align:left;
z-index:10000;
}
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:table-cell;
vertical-align:middle;
border-bottom:1px solid #c0c0c0;
}
EDIT
Sorry the code above is actually centering everything on ONE line..ie ONE drop down with all the suggestions in that one drop down
Just add display: block and use line-height for horizontal center
CSS
#results {
width:94%;
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color:white;
border:1px solid #c0c0c0;
text-align:left;
z-index:10000;
}
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:block;
vertical-align:bottom;
border-bottom:1px solid #c0c0c0;
line-height: 50px;
}
DEMO HERE
Set the line-height: of your item class to be equal to the height of the div, so something like
#results .item {
padding:3px;
height:50px;
font-family: arial;
display:table-cell;
vertical-align:middle;
line-height:50px;
border-bottom:1px solid #c0c0c0;
}
I have a simple HTML template like this
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
border:green 2px solid;
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
background-color : red;
width:70%;
height:80px;
border:black 2px solid;
padding:5px;
}
#header1 {
display:inline-block;
width:50%;
border:green 2px solid;
}
#header2 {
display:inline-block;
width:50%;
border:green 2px solid;
}
</style>
</head>
<body>
<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div>
<div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li>Home</li>
<li>Electronics</li>
<li>Fashions</li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>
</body>
</html>
But when I set the width to 50% for the divs having ids as header1 and header2 they tend not to occupy the entire space of the parent container div having id header and be aligned horizontally side by side. Why is it so ?
Am I missing something here ? Please explain the basics as I am a newbie to HTML and CSS.
try this ..
#header {
background-color: red;
width: 70%;
height: 100%;
border: black 2px solid;
padding: 5px;
}
U may be responsive properly .
First thing is remove padding from #header, then you give 2px border to both #header1 and #header2 Remove it border: 2px solid green;
And another thing is display:inline-block takes white-space in the html. So, remove whitespace between both div #header1 and #header2.
Like: <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
Here also i give vertical-align:top to make then vertically top.
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
border:green 2px solid;
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
background-color : red;
width:70%;
height:80px;
border:black 2px solid;
}
#header1 {
display:inline-block;
width:50%;
vertical-align: top;
}
#header2 {
display:inline-block;
width:50%;
vertical-align: top;
}
<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li>Home</li>
<li>Electronics</li>
<li>Fashions</li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>
Check Fiddle.
In your example, there are two problems:
The first one, you declare 50% + 4px border for each, in total these the header boxes has width > 100% (parent) and they can't be side by side.
The second one, if you remove border, between them is a space (caused by line break in your code).
You can remove white chars between them
<div id=header1>content</div><div id=header2>content></div>
http://jsfiddle.net/z4pybf6x/
or use float instead of inline-block.
When you use float: left for both elements, don't forget to clear after, eg. adding overflow: hidden to #header.
#header {overflow: hidden}
#header1, #header2 {float: left; border: 0; width: 50%;} /* no display: inline-block needed */
http://jsfiddle.net/z4pybf6x/1/
#header1 {
display:inline-block;
width:49%;
border:green 2px solid;
float: left;}
#header2 {
display:inline-block;
width:49%;
border:green 2px solid;float: right }
The width should be 49% as the border is also set to 2 px so 50% will arrange the div one below the another, and any value less than 50% will do the trick.
Here is the fiddle
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
border:green 2px solid;
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
overflow:hidden;
background-color : red;
width:75%;
height:80px;
border:black 2px solid;
padding:5px;
}
#header1 {
display:inline-block;
width:35%;
border:green 2px solid;
background: red;
vertical-align: top;
}
#header2 {
display:inline-block;
width:50%;
border:green 2px solid;
background: red;
vertical-align: top;
}
Hi guys i would like the border to surround my whole <div id=wedding> but it wont wrap around the image and the text within the <div>. Please help my code is below:
HTML:
<div id="Weddings">
<img src="images/gallery/weddinggh.jpg">
<br>
<a href="gweddings">Click here to check out pictures of
<br> our past wedding cakes<a>
</div>
CSS:
#Weddings {
padding: 2px;
border: 1px solid;
}
#Weddings a:link {
text-decoration:none;
color:black;
font-size:16px;
font-family: "footer";
}
#Weddings img {
width:200px;
height:300px;
}
#Weddings {
padding: 2px;
border: 1px solid;
width:200px;
}
you just need to set a width to your div :)
Here's an example : http://jsfiddle.net/f4t2Z/
You need to define a border color
#Weddings {
padding: 2px;
border: 1px solid red;
}
or whatever.
Have you tried
#Weddings img {
width:200px;
height:300px;
display:block;
}
Please find below fiddle what i tried
http://jsfiddle.net/9LdEc/
code:
html:
<div id="CorpDealerSearch">
<div class="row">
<div class="left">
Quarter To Date
</div>
<div class="left">
914
</div>
<div class="left">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8BxPh6MWMQ86cY/pXO/0or0qcGh0OW3F8AAAAASUVORK5CYII=">
</div>
<div class="left">
<span>OFF TIER2</span>
</div>
</div>
</div>
css:
#CorpDealerSearch{
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:3px;
}
.row{
display:table-row;
}
.left {
display:table-cell;
display:inline-block;
padding:5px;
}
But I want the design like the screenshot below. How can I modify the fiddle to get the design like this?
I need to do changes only for the last cell.
I have updated your fiddle:
http://jsfiddle.net/9LdEc/4/
I have added some of classes to your html and used the following css:
body {
font-family: Arial;
}
#CorpDealerSearch {
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:5px;
vertical-align: middle;
line-height: 25px;
}
#CorpDealerSearch a,
#CorpDealerSearch a:hover,
#CorpDealerSearch a:visited {
color: red;
font-weight: bold;
}
.row {
display:table-cell;
vertical-align: middle;
}
.left {
display:table-cell;
display:inline-block;
padding-left:5px;
padding-right: 5px;
}
.tier {
border-left: 2px dotted black;
background-color: lightgreen;
}
Is this what you wanted?
Any idea how to do this using css ?
I'm looking for a good and clear way to do this.
HTML
<div class="line"></div>
<span>OR</span>
<div class="line"></div>
CSS
div.line
{
width:1px;
background-color:Gray;
height:40px;
margin:10px;
}
span
{
font-weight:bold;
}
Live Sample
HTML
<div class="orWrapper">Or</div>
CSS
.orWrapper {
text-transform: uppercase;
}
.orWrapper:before,
.orWrapper:after {
content: "";
display: block;
height: 50px;
margin-left: 10px;
border-left: 1px solid #000000;
}
DEMO
The easiest way to do it is just use three divs and border property:
your html:
<div class="vertical">
</div>
<div>
OR
</div>
<div class="vertical">
</div>
your css :
.vertical{
border-left:thin solid black;
height:30px;
margin-left:10px;
}
fiddle for testing: http://jsfiddle.net/SURzN/
working example: http://jsfiddle.net/fTGuV/
css:
.line
{
height:30px;
float:left;
margin-left:10px;
border: solid 0px #000000;
width:1px;
border-left-width: 2px;
}
html:
<div class="line">
</div>
<div style="clear:both;"></div>
<div>OR</div>
<div class="line">
</div>
<div style="clear:both;"></div>
HTML
<div class="line"><div class="txt">Or</div> <span></span></div>
CSS
span{height:100%; display:block; margin:0 15px; border-left:1px solid black}
.line{width:30px; margin:10px; position:relative; height:200px; text-align:center}
.txt{position:absolute; top:45%; left:4px; width:20px; height:25px; background:white}
DEMO
Easiest thing i did :-
<div Class="myclass"></div>
<div>OR</div>
<div Class="myclass"></div>
CSS
.myclass{
width:1px;
height:30px;
background-color:black;
margin-left:10px;
}
DEMO
I would keep it all in the same box...
HTML
<span class="vertical-bar">
<span>Or</span>
</span>
CSS
.vertical-bar {
background: url(http://dl.dropbox.com/u/2179487/black_pixel.png) center top repeat-y;
float: left;
padding: 100px 0;
}
.vertical-bar span {
background-color: white;
text-transform: uppercase;
}
Demo: http://jsfiddle.net/PjPAU/