I have a silly problem.
I want two texts to stay in the same line, but one text-align: left; and the other one text-align: center;
What's the correct way to do that?
.number{
text-transform:uppercase;
letter-spacing:1px;
text-align:left;
display:inline;
width: 50px;
margin-top:-10px;
float:left;
font-size:18px;
}
.menutitle{
display:block;
text-transform:uppercase;
letter-spacing:1px;
text-align:center;
font-size:18px;
margin-bottom:31px;
}
<span class="number">00</span><span class="menutitle">TEXT</span>
You can do this with Flexbox
.element {
display: flex;
}
.menutitle {
flex: 1;
text-align: center;
background: lightgreen;
}
<div class="element">
<span class="number">00</span>
<span class="menutitle">TEXT</span>
</div>
Related
I'm totally new to webdesign and all of the things. I'm trying to create textboxes and center them.
Here is what I have now:
Index.php & css
.messagebox {
position:fixed;
background-color:#267677;
color:#ffffff;
border:3px solid #ffffff;
font-family:Arial Black, Gadget, sans-serif;
font-size:24px;
width:210px;
z-index:1;
padding:2px;
text-align: center;
margin-left: 200px;
}
.messagebox1 {
position:fixed;
background-color:#267677;
color:#ffffff;
border:3px solid #ffffff;
font-family:Arial Black, Gadget, sans-serif;
font-size:24px;
width:180px;
z-index:1;
padding:2px;
text-align: center;
margin-left: 418px;
}
.messagebox2 {
position:fixed;
background-color:#267677;
color:#ffffff;
border:3px solid #ffffff;
font-family:Arial Black, Gadget, sans-serif;
font-size:24px;
width:210px;
z-index:1;
padding:2px;
text-align: center;
margin-left: 606px;
}
.messagebox3 {
position:fixed;
background-color:#267677;
color:#ffffff;
border:3px solid #ffffff;
font-family:Arial Black, Gadget, sans-serif;
font-size:24px;
width:180px;
z-index:1;
padding:2px;
text-align: center;
margin-left: 824px;
}
.messagebox4 {
position:fixed;
background-color:#267677;
color:#ffffff;
border:3px solid #ffffff;
font-family:Arial Black, Gadget, sans-serif;
font-size:24px;
width:180px;
z-index:1;
padding:2px;
text-align: center;
margin-left: 1012px;
}
<div class="messagebox">Naam Winkel</div>
<div class="messagebox1">15/08/2020</div>
<div class="messagebox2">Totaal (Prijs)</div>
<div class="messagebox3">Door Wie?</div>
<div class="messagebox4">Extra Info?</div>
Output
Is there an easier way to group all those mesageboxes and center them all at once? At the moment all the margin-left have been done by hand..
Thnx in advanced
You could use flexboxes, CSS-Grid or simply wrap all the boxes and declare them as inline-block and align them then with text-align.
Option #1: Flexbox
Here you wrap the textboxes and give them the wrapper display: flex; to declare everything as flex elements. Then you can use justify-content: center; to center them.
.messagebox {
min-width: 1200px;
display: flex;
justify-content: center;
}
.messagebox div {
background-color: #267677;
color: #ffffff;
border: 3px solid #ffffff;
font-family: Arial Black, Gadget, sans-serif;
font-size: 24px;
width: 210px;
padding: 2px;
text-align: center;
}
<div class="messagebox">
<div>Naam Winkel</div>
<div>15/08/2020</div>
<div>Totaal (Prijs)</div>
<div>Door Wie?</div>
<div>Extra Info?</div>
</div>
Option #2a: Inline-blocks using a div as wrapper
With this method, you declare all the divs inline elements with display: inline-block; and as such they can be centered by using text-align-center;
.messagebox {
min-width: 1200px;
text-align: center;
}
.messagebox div {
display: inline-block;
background-color: #267677;
color: #ffffff;
border: 3px solid #ffffff;
font-family: Arial Black, Gadget, sans-serif;
font-size: 24px;
width: 210px;
padding: 2px;
text-align: center;
}
<div class="messagebox">
<div>Naam Winkel</div>
<div>15/08/2020</div>
<div>Totaal (Prijs)</div>
<div>Door Wie?</div>
<div>Extra Info?</div>
</div>
Option #2b: Inline-blocks using a list
Same methode as #2a. However you use an unordered list as a wrapepr and instead of using divs you use the normal list items. The "list bullet" will eb removed with list-style-type: none;.
.messagebox {
min-width: 1200px;
text-align: center;
list-style-type: none;
}
.messagebox li {
display: inline-block;
background-color: #267677;
color: #ffffff;
border: 3px solid #ffffff;
font-family: Arial Black, Gadget, sans-serif;
font-size: 24px;
width: 210px;
padding: 2px;
text-align: center;
}
<ul class="messagebox">
<li>Naam Winkel</li>
<li>15/08/2020</li>
<li>Totaal (Prijs)</li>
<li>Door Wie?</li>
<li>Extra Info?</li>
</ul>
Option #3: CSS Grid
Messy as it is complicated for this use and total overkill. As such you better of to stick with flexbox or inline-block.
I have this div :
and I tried making the font-size of the text responsive using this code :
font-size:calc(xx + 1.5vw);
If I make the screen smaller the headers are not vertically aligned :
HTML :
<div id="topsection">
<div id="header1">HEADER 1</div>
<div id="header2">Header 2</div>
</div>
CSS :
#header1 {
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
color: #fff;
margin-left:220px;
font-size:calc(9px + 1.5vw);
}
#topsection {
background-color:#222939;
width:100%;
height:75px;
z-index:1;
position:absolute;
top:10px;
left:0;
color:white;
}
I tried changing the CSS for the headers like this :
#header1 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(9px + 1.3vw);
color: #fff;
}
but now it looks like this :
You need a content div to center in the middle. See the example below. Have only tested this in Chrome.
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
Final code
<!DOCTYPE html>
<html>
<head>
<style>
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
</style>
</head>
<body>
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
</body>
</html>
This is a font glyph issue and is due to the fact that the black gylph character is not aligned directly along the left of the glyph block.
If you see the example below, you can set that there is actual space to the left side of the glyph block before the glyph character.
h1,
h3 {
margin: 0;
margin-bottom: 1px;
margin-left: 150px;
font-family: monospace;
}
h1 {
font-size: 144px;
}
h3 {
font-size: 72px;
}
span {
background: red;
}
<H1><span>H</span></H1>
<H3><span>H</span></H3>
This is a font-design issue...and it's on purpose...so that letters don't automatically bunch up together.
The amount of space is proportional to the font-size and each font so there's no single value you can use to align them.
What works for one font won't work for the next.
I am now learning HTML and I have put a relative div in my code.
There are 2 more divs before that one but they don't collide, sadly the first two still take space above the relative one and I want it to be on top of the page.
My code :
.foo {
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
left:540px;
border:5px solid #fff;
top:-50px;
}
.lastpage {
position:relative;
text-align:left;
width:20%;
}
.index {
position:relative;
text-align:left;
width:20%;
}
body {
background-color:lightgray;
text-align:center;
align-content:center;
color: #990099;
font-family: 'Tahoma';
font-size: 15px;
}
<div class="foo">
<br><br>F O O - B A R
</div>
<div class="lastpage">
<form method=get action="http://www.boomy.web44.net/CURRY.html/">
<button type="submit">Last Page</button>(2/2)
</form>
</div>
<div class="index">
<form method=get action="http://www.boomy.web44.net//">
<button type="submit">Index</button>
</form>
</div>
I want the "Foo bar" div to go up and be on the same level as the two buttons
I changed your CSS code :
.foo
{
float:right;
margin-right: 540px;
font-family: 'Tahoma';
font-size: 30px;
color: #fff;
background-color: black;
height: 180px;
width: 280px;
text-align: center;
position:relative;
border:5px solid #fff;
top:-50px;
}
.lastpage
{
position:relative;
text-align:left;
width:20%;
float:left;
}
.index
{
float:left;
position:relative;
text-align:left;
width:20%;
}
I added float:right and margin-right to your foo class and float:left to your lastpage and index class.
I think it should work for you !
Try adding the display: inline-block rule to make the divs appear on the same line, or float. By default, a div is block display and two divs won't come on the same line.
Another way of doing this is using the float: left property on the lastpage div to make it stay to the left and align it and the other div on the same line.
Does this solve your problem?
This community has already been a big help. I have one noob question. I did do a search, but didn't turn up this situation, so apologies if this has been asked before.
I have a "nav" div currently sitting in a wrapper div. Nested in my nav div are three child elements that I want to position left, center, and right accordingly. I tried floating the three elements but they're all stacking on one side. I would like the logo div on the left, header in the center, and phone number on the right.
I know these can be positioned more precisely with absolute positioning, but since I'm trying to keep the layout as fluid as possible, is there another way?
Here is my HTML
<div class="wrapper">
<div class="nav">
<div class="logo"><em>BLI </em></div>
<div class="header"><em>California's Leader in Workers' Compensation</em></div>
<div class="phonenumber">Call us:<br>
909-256-0525</div>
</div>
And my CSS:
.wrapper{
min-width:1200px;
position:relative;
width:100%;
overflow:auto;}
.nav{
color:#FFFFFF;
font-size:1.563em;
font-weight:bold;
float:left;
font-family: Arial;
background-color:#C7C2C2;
width:100%;
height:80px;
display:inline;
}
.logo{
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
width: 50px;
color: #0E2B5E;
top: 9px;
clear: both;
float: left;
}
.header{
text-shadow:black 0.1em 0.1em 0.2em;
padding-top:40px;
clear:both;
width:300px;
text-align:center;
float:left;
}
.phonenumber{
text-shadow: black 0.1em 0.1em 0.2em;
float: left;
font-size: 1em;
padding: 5px;
}
Any general responsive design tips would also be appreciated.
Thanks!
You can use display:table; on the wrapper and display:table-cell; on all its child elements.
This treats the wrapper div as if it were a table element with the width of 100%, and all its child elements as table cells. (http://www.w3schools.com/cssref/pr_class_display.asp)
.wrapper{
width: 100%;
height:auto;
display:table;
background-color:gray;
}
.logo{
display:table-cell;
text-align:left;
width:33%;
}
.header{
display:table-cell;
text-align:center;
width:33%;
}
.phonenumber{
display:table-cell;
text-align:right;
width:33%;
}
By making the wrapper 100% and its children 33%, its now responsive too!
I cleared out your current styling to make it easier for you to read.
Fiddle: http://jsfiddle.net/mLmcfrup/
Here i can solved your problem and it is fully Responsive css code and it is working in all browser's and change width according to browser size.It can be used in mobile, pc and other resolution. I hope it helps you.
Live Working Demo
HTML Code:
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
CSS Code:
.main
{
width:100%;
position:relative;
}
.left
{
width:20%;
float:left;
position:relative;
background-color:red;
}
.middle
{
width:60%;
float:left;
position:relative;
background-color:green;
}
.right
{
width:20%;
float:left;
position:relative;
background-color:blue;
}
Result:
To place the inner divs side-by-side, and keeping it fluid, use the css display properties table and table-cell.
.nav {
display: table;
width: 100%;
}
.nav > div {
display: table-cell;
}
Remove all the floats and stuff, and let the nav work like a table, placing it's children side by side like inline cells...
Here's a simple example of how it works (without all of your styling): http://jsfiddle.net/1co0qLx9/
Here are 2 best solutions of your concern.
I have created 2 fluid layouts based on your code.
First with "float" so that you could easily relate and implement quickly.
URL:- http://sandeepparashar.com/stackoverflow/fluid-layout-with-float.html
Second with "box-flex". Becasue float has been out dated and you would get a chance to know about new CSS3 properties. Also box flex has no width restriction.
URL:- http://sandeepparashar.com/stackoverflow/fluid-layout-with-box-flex.html
CSS Code with Float layout:
.wrapper {}
.nav {
width:100%;
vertical-align:middle;
box-sizing:border-box;
color: #FFFFFF;
font-size: 1.563em;
font-weight: bold;
font-family: Arial;
background-color: #C7C2C2;
height: 80px;
}
.logo {
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
color: #0E2B5E;
float:left;
width:100px;
padding-top:10px;
}
.header {
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
margin:0 200px 0 100px;
padding-top:25px;
}
.phonenumber {
text-shadow: black 0.1em 0.1em 0.2em;
font-size: 1em;
padding: 5px;
float:right;
width:200px;
padding-top:10px;
}
HTML DIV position changes with Float layout:
<div class="wrapper">
<div class="nav">
<div class="phonenumber">Call us:<br>
909-256-0525</div>
<div class="logo"><em>BLI </em></div>
<div class="header"><em>California's Leader in Workers' Compensation</em></div>
</div>
</div>
CSS3 Code with Box Flex layout:
.wrapper {}
.nav {
display:box;
display:-webkit-box;
display:-ms-flexbox;
display:-moz-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-align:center;
-ms-flex-align:center;
-moz-box-align:center;
width:100%;
vertical-align:middle;
box-sizing:border-box;
color: #FFFFFF;
font-size: 1.563em;
font-weight: bold;
font-family: Arial;
background-color: #C7C2C2;
height: 80px;
}
.logo {
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
color: #0E2B5E;
}
.header {
box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-moz-box-flex:1;
display:block;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
}
.phonenumber {
text-shadow: black 0.1em 0.1em 0.2em;
font-size: 1em;
padding: 5px;
}
If required more help, Please most welcome :)
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.