I am trying to use CSS to align numbers in a table when brackets are used to show the number as a negative value. Like you would use decimal tabs in MS Word.
The CSS works in IE6 and up but my problem is for IE6 - IE9 within print preview or when the page is printed the right bracket padding becomes greater than the specified value. Its fine printing within Chrome and Firefox.
Can anyone point me in the right direction to fix this?
The code:
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css" />
<style type="text/css">
/* Ignore stuff below */
html{
font-family: arial, tahoma, sans-serif;
font-size: 12px;
line-height: 1.25em;
color: #333;
-webkit-font-smoothing: antialiased;
text-align: center;
background: #eee;
}
.wrapper{
width: 780px;
margin: 10px auto;
padding: 10px;
background: #fff;
}
table{
width: 100%;
font-size: 24px;
line-height: 1.25em;
}
h1{
font-size: 18px;
line-height: 1.25em;
text-align: left;
background: #eee;
padding: 5px 10px;
}
/* Ignore stuff above */
.pR{
padding-right: 10px; /* Needs to match width of .bracket below */
}
.bracket{
width: 10px; /* Needs to match padding-right of .pR above */
text-align: center;
display: inline-block;
/* Fix for inline-block for IE 7 */
zoom: 1;
*display: inline;
}
.right{
text-align: right;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>With padding</h1>
<table>
<tr>
<td class="right pR">1</td>
</tr>
<tr>
<td class="right"><div class="bracket">(</div>1<div class="bracket">)</div></td>
</tr>
</table>
</div>
</body>
</html>
NO need to use div.
Use span element in place of div.
Div is block element that why creating issue.
Related
with the following html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block; font-size: 12vw";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block; font-size: 11vw";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
</html>
and the following css:
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(.5rem, 10vw, 1rem);
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
}
#ppal {
word-spacing: 90%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
I have tried for hours to find out why the h1 goes beyond the limits of its parent.
I am trying to keep h1 in two lines of (responsive) text. When you grow the window it goes above the 1600px limit placed on the body.
No matter if I try max-width, overflow, etc that it keeps getting out the box.
Can anybody tell me what am I doing wrong? Im trying to figure out how to stop the h1 to go beyond the above limit.
Best
It is the white-space: nowrap; which prevents your span to break your lines when the content is filled in the parent. Remove that and your code will work fine
Working Fiddle
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1600px;
margin: 0 auto;
border: 1px solid red;
}
main {
}
#font-face {
font-family: "Alternate Gothic";
src: url("Alternate Gothic W01 No 3.ttf") format("truetype");
}
#font-face {
font-family: "Times Roman";
src: url("OPTITimes-Roman.otf") format("opentype");
}
.about {
text-align: center;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 5vw;
}
.fulltitle {
}
h1 {
font-family: "Alternate Gothic";
text-align: center;
border: 1px solid red;
display: inline-block;
}
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 4vw;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
/* white-space: nowrap; */
}
<header>
<div class="about">
<h4><span>A work selection by </span>mfowmyoxsnk</h4>
</div>
</header>
<main>
<article class="uno">
<div class="fulltitle">
<h1>
<span class="title_part" style="display: block; font-size: 12vw" ;
>stills & moving image</span
>
<span class="title_part" style="display: block; font-size: 11vw" ;
>TECHNICAL PRODUCTION</span
>
</h1>
</div>
</article>
<article class="dos"></article>
</main>
If you want your title to return to the line you have to put wrap like this
white-space: wrap;
Like the others have said you need to remove the "white-space", this will cause the text to go in to two lines. If you want to prevent this behavior you will have to change the font-size to be smaller.
After that, remove the margin from ".uno". This will ensure that the h1 element remains in the div. The margin currently pushes it out the div no matter the size of the child, even if the text is responsive.
Another recommendation beyond what you're looking for, instead of wrapping two spans in a single "h1", remove the h1, and replace the two spans with 1 "h1" element and the other with a "h2" or whatever subheader element depending on the size you want. If you are trying to modify the positions of elements(center, left, right) instead of margins I recommend looking into flexbox.
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
}
<div class="fulltitle">
<h1 class="title_part" style="display: block; font-size: 5vw;";>stills & moving image</h1>
<h2 class="title_part" style="display: block; font-size: 3vw; text-align: center; ">TECHNICAL PRODUCTION</h2>
</div>
My bad for the formatting, I'm still learning how to post answers on stackoverflow.
I have found that:
(index.html)
font-size placed in span is making it grow endlessly because of the vw.
(style.css)
clamp will make it responsive the way I want to, with a max-limit to whatever I want in the final layout.
Posting what I get as soon as I have it ready
Below what I accept as a solution to the issue I was having with h1.
It does not jump to a new line once I changed the units applied on index.html / .uno / span you can see applied on the very first post, and some tweaking on the css that you can see hereunder.
I did not need white-space.
I welcome any feedback to fine tune it.
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block;";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block;";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
(style.css)
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(1rem, 11.3vw, 11rem);
margin: 2rem 0;
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
font-size: clamp(.1rem, 2.5vw, 1rem);
}
#ppal {
font-size: 50%;
font-weight: 400;
word-spacing: 100%;
}
#sec {
word-spacing: 30%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
padding: 1rem 0;
}
Best
EDIT: I think this boils down to browsers rendering fonts differently. I reduced and reduced my code to try to figure out where the problem was, and I ended up just having a plain webpage with only <h1>Ladesoft</h1> in the body and nothing else, with nothing in my CSS file other than a global choice of font, and I noticed that Chrome and Firefox rendered the heading quite differently. Searching around online, I found this query, and basically it looks like there's unlikely to be any way of achieving my goal. So I'm going to have to resort to creating an image I think. I'll leave this post unanswered for now in case anyone comes up with a solution.
I'm having a problem where the header (h1) on my website looks completely different depending on which browser I use. I am doing something a little unusual with it, but I can't figure out how to get things to look the same. My website is http://www.ladesoft.com
I want to have the title of my site written with just the one line:
<h1>Ladesoft</h1>
I am using CSS to manipulate the text to look like this:
My CSS file can be found here: https://github.com/andylatham82/Website/blob/master/styles.css
Edit: Adding CSS code. Apologies for including it all, but I just don't know where the problem is.
html
{
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
body
{
height: 100%;
background-color: rgb(43, 43, 43);
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-left: auto;
margin-right: auto;
}
h1
{
color: orange;
font-size: 600%;
font-weight: 100;
margin-top: 20px;
margin-bottom: -60px;
margin-left: -60px;
transform:scale(0.9,1);
text-decoration: underline;
text-decoration-color: cornflowerblue;
overflow: hidden;
position:relative;
z-index: -1;
}
h1::first-letter
{
color: cornflowerblue;
font-size: 300%;
margin-right: -20px;
float: left;
margin-top: -125px;
margin-right: -106px;
position: relative;
}
h2
{
color: cornflowerblue;
text-align: center;
font-weight: 50;
margin-top: 20px;
margin-bottom: 20px;
}
p
{
color: rgb(228, 226, 179);
}
table
{
margin-left: auto;
margin-right: auto;
padding: 0;
border-spacing:0;
}
td
{
color: rgb(228, 226, 179);
width: auto;
text-align: left;
border-spacing: 0;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
}
a
{
color: cornflowerblue;
}
ul
{
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: orange;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: red;
}
hr
{
margin-top: 0px;
border-color: cornflowerblue;
align: left;
size: 4;
border-style: solid;
}
iframe
{
height: 650px;
width: 405px;
border: none;
overflow: hidden;
justify-content: center;
}
.gamelink
{
margin-left: 20px;
}
.date
{
color: orange;
}
.wrapper {
margin: 0px;
padding: 0px;
height: 128px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
padding-bottom: 400px;
justify-content: center;
}
canvas {
border: 0px;
width: 512px;
height: 512px;
background: black;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#centered
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
One of my HTML files can be found here: https://github.com/andylatham82/Website/blob/master/pages/games.html
Edit: Adding HTML code:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="Game, Video, Videogame, C++, C#, Monogame, Pico-8, Pico8, Arduboy, Lua, CSS, Ladesoft, Andy, Latham">
<meta name="description" content="Video games made by Andy Latham">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Andy Latham">
<link rel="stylesheet" href="../styles.css">
<TITLE>Ladesoft: Games</TITLE>
</head>
<body>
<h1>Ladesoft</h1>
<ul>
<li>Games</li>
<li>Software & Experiments</li>
<li>About</li>
</ul>
<hr style="margin-left: 55px; width: 48px">
<h2>Games</h2>
<p>I love making games. Here's a selection of my output. The purpose of any game is to be played, so I'd love to <a href=about.html>hear</a> from anyone who plays any of these!</p>
<br>
<table>
<tr>
<td>
<img src="../images/thumbnails/textadventurethumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress text adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/pointandclickthumb.png" title="Point-and-Click Adventure" alt="Point-and-Click Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress 'point-and-click' adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/babydumpthumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[September 2020]</span> Earn money by having (and abandoning) babies.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/blackdeaththumb.png" title="Black Death" alt="Black Death" style="float:left;"></td>
<td><span class="date">[August 2019]</span> Play as bubonic plague and try to wipe out the villagers.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/thecrawlthumb.png" title="The Crawl" alt="The Crawl" style="float:left;"></td>
<td><span class="date">[March 2019]</span> A mini dungeon crawling platform game.</td>
</tr>
</table>
<br>
<br>
<p id="centered">
-Ladesoft-
</p>
<br>
</body>
</html>
With Chrome on Linux, things look correct:
but with Firefox on Linux, this is what I see:
With Chrome on Windows, it's this:
and with Firefox on Windows, it's this:
And just for good measure, with Edge on Windows, it's this:
Would anyone be kind enough to help me work out what's going on? I understand that different browsers render things differently, but is there any way of achieving my goal of having this logo look the same everywhere without resorting to using an image?
There are a couple of problems in the approach which lead to malignment and different styles in the logo - variable fonts and reliance on underline.
The most obvious problem is that a selection of fonts is given, the first being Menlo which I believe may be present on some systems but is not present for example on my Windows 10 system. This means that the font style is different on different systems and that explains the different look of the orange characters shown in the question. Different fonts also have different spacing such as leading so you cannot compensate for this in general using px units.
To get exactly the same look fontwise you'll need to link to the font you want. I have used a google font Deja Vu mono as some of the fonts in the question are paid for and/or not available.
The more subtle problem is one of positioning of the lines and the first character. If you look at the position of underline on Firefox compared to Chrome it is not exactly the same in relation to the baseline of the characters. Whatever we do in CSS we cannot compensate for this without knowing exactly how each browser renders underline.
We avoid underline therefore and turn to borders and use borders to draw the 'L' as positioning of first character may also not be consistent across browsers. This approach worked reasonably well, except on some magnifications on some screens there was a pixel difference in the rendering.
So, the approach here uses linear-gradients to set backgrounds on the before and after pseudo elements. To get seemingly pixel-perfect fit we make the pseudo element colors overlap rather than abut.
Obviously you can tweak the sizes to suit, but all are in ems so things should be responsive.
Tested on Windows10 with Chrome, Edge, Firefox, IE11 and on iPadIOS 14 Safari and results are reasonably consistent. It may however be better to ditch using h1 as browsers do add their own styling and instead use div with a class. Only the h1 and its pseudo elements have been changed in this CSS, and the text of the logo has been transferred from the main HTML to pseudo elements, with the L rendered not as a character but as linear-gradients as browser rendering of first-letter differs.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="Game, Video, Videogame, C++, C#, Monogame, Pico-8, Pico8, Arduboy, Lua, CSS, Ladesoft, Andy, Latham">
<meta name="description" content="Video games made by Andy Latham">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Andy Latham">
<TITLE>Ladesoft: Games</TITLE>
<link rel="stylesheet" href="../styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<style>
html
{
height: 100%;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
body
{
height: 100%;
background-color: rgb(43, 43, 43);
font-family: 'Space Mono', monospace;
margin-left: auto;
margin-right: auto;
}
h1 {
border-style: solid;
border-width: 0 0 0 0.2em;
border-color: transparent transparent transparent transparent;
height: 1.5em;
position: relative;
padding: 0 0 0.05em 0;
margin: 0 0 0.1em 0;
display: inline-block;
width: auto;
transform: scale(0.9, 1);
}
h1:before {
content: '';
position: absolute;
background-image: linear-gradient(to top, cornflowerblue 0em, cornflowerblue 0.11em, transparent 0.11em, transparent 100%), linear-gradient(to right, cornflowerblue 0%, cornflowerblue 0.21em, transparent 0.21em, transparent 100%);
height: 1em;
width: 1.1em;
top: 0.4em;
margin-left: -0.2em;
background-color: transparent;
display: inline-block;
z-index:2;
}
h1:after {
color: orange;
content: 'adesoft';
position: relative;
font-weight: 100;
padding-left: 0.1em;
background-image: linear-gradient(to top, transparent 0em, transparent 0.15em, cornflowerblue 0.15em, cornflowerblue 0.25em, transparent 0.25em, transparent 100%);
}
h2
{
color: cornflowerblue;
text-align: center;
font-weight: 50;
margin-top: 20px;
margin-bottom: 20px;
}
p
{
color: rgb(228, 226, 179);
}
table
{
margin-left: auto;
margin-right: auto;
padding: 0;
border-spacing:0;
}
td
{
color: rgb(228, 226, 179);
width: auto;
text-align: left;
border-spacing: 0;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
}
a
{
color: cornflowerblue;
}
ul
{
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: orange;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: red;
}
hr
{
margin-top: 0px;
border-color: cornflowerblue;
align: left;
size: 4;
border-style: solid;
}
iframe
{
height: 650px;
width: 405px;
border: none;
overflow: hidden;
justify-content: center;
}
.gamelink
{
margin-left: 20px;
}
.date
{
color: orange;
}
.wrapper {
margin: 0px;
padding: 0px;
height: 128px;
display: flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
padding-bottom: 400px;
justify-content: center;
}
canvas {
border: 0px;
width: 512px;
height: 512px;
background: black;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#centered
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1></h1>
<ul>
<li>Games</li>
<li>Software & Experiments</li>
<li>About</li>
</ul>
<hr style="margin-left: 55px; width: 48px">
<h2>Games</h2>
<p>I love making games. Here's a selection of my output. The purpose of any game is to be played, so I'd love to <a href=about.html>hear</a> from anyone who plays any of these!</p>
<br>
<table>
<tr>
<td>
<img src="../images/thumbnails/textadventurethumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress text adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/pointandclickthumb.png" title="Point-and-Click Adventure" alt="Point-and-Click Adventure" style="float:left;"></td>
<td><span class="date">[2020]</span> A work-in-progress 'point-and-click' adventure.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/babydumpthumb.png" title="Text Adventure" alt="Text Adventure" style="float:left;"></td>
<td><span class="date">[September 2020]</span> Earn money by having (and abandoning) babies.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/blackdeaththumb.png" title="Black Death" alt="Black Death" style="float:left;"></td>
<td><span class="date">[August 2019]</span> Play as bubonic plague and try to wipe out the villagers.</td>
</tr>
<tr>
<td>
<img src="../images/thumbnails/thecrawlthumb.png" title="The Crawl" alt="The Crawl" style="float:left;"></td>
<td><span class="date">[March 2019]</span> A mini dungeon crawling platform game.</td>
</tr>
</table>
<br>
<br>
<p id="centered">
-Ladesoft-
</p>
<br>
</body>
</html>
I want to design a layout as below image:
As in this layout, this is my header. Black rectangle is some components (buttons, link ...) with fixed width, and red rectangle is my search form.
I want when user changes the size of browser windows, search form will be smaller (in width), until some value, will appear horizontal scrollbar. Maybe the hard part is: I don't know how to solve "auto-resize" in css.
Here is my sample code:
my HTML:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Here</title>
<link type="text/css" rel="stylesheet" href="css/application.css">
<script src="javascripts/pace.js"></script>
</head>
<body>
<header class="page-head">
<div class="wrapper">
<div class="logo"></div>
<form class="form-search" action="#" onsubmit="return false" method="get" name="search_form">
<div class="search-box"></div>
</form>
<nav class="site-nav">
<span></span>
<div class="site-nav__item">Home</div>
<div class="site-nav__item">Notifications</div>
<div class="site-nav__item">Profile</div>
<div class="site-nav__button">Add Question</div>
</nav>
</div>
</header>
</body>
</html>
my CSS:
.html {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*, *:before, *:after {
box-sizing: inherit;
}
.page-head {
position: fixed;
top: 0;
left: 0;
height: 45px;
width: 100%;
font-size: 14px;
color: #fff;
}
.page-head.wrapper {
width: 1020px;
margin: 0 auto;
/* center horizontally. apply for block level element */
border-bottom: 1px solid #ddd;
/* drop shadow effect */
box-shadow: 0 3px 5px -3px rgba(200, 200, 200, 0.3);
height: 45px;
display: flex;
flex-direction: row;
}
form {
display: block;
}
.logo {
width: 45px;
height: 45px;
background: red;
}
.form-search {
margin: 0;
float: none;
position: static;
height: 27px;
background-image: url(../images/search.png);
}
.search-box {
border-radius: 2px;
-webkit-font-smoothing: antialiased;
margin-top: 0;
padding: 5px;
padding-left: 26px;
float: none;
width: 100%;
height: 27px;
font-size: 15px;
line-height: normal;
background: #eee;
}
.site-nav {
display: flex;
flex-direction: row;
z-index: 1;
margin-left: 20px;
}
.site-nav__item {
display: block;
height: 45px;
color: #666;
padding: 0 16px;
background-repeat: no-repeat;
background-position: 10px center;
border-bottom: 1px solid transparent;
}
Please tell me how to design this layout using CSS. And if possible, how can do by using Flexbox ?
Thanks :)
Flexbox works well to solve this issue. You basically want the search box (or its form element) to fill available space and shrink as needed (up to a certain point) when the window size decreases.
The secret sauce is to give the form element a flex-grow: 1 to tell it to fill the available space.
html {
font-family: Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-head {
display: flex;
align-items: center; /* Makes the nav items and logo appear vertically centered with the search box*/
margin: 1.5rem;
}
.logo {
/* Prevent logo from shrinking
so it doesn't collide when window gets narrow. */
flex-shrink: 0;
}
.search-form {
margin: 0 1rem;
flex-grow: 1; /* <-- THE SECRET SAUCE! */
min-width: 18rem;
}
.search-box {
width: 100%;
padding: .4rem;
background-color: #ffb;
}
.site-nav > ul {
display: flex;
margin: 0;
}
.site-nav__item {
/* Prevent nav items from shrinking
so they won't collide when window gets narrow. */
flex-shrink: 0;
list-style-type: none;
margin: 0 .55rem;
cursor: pointer;
/* Prevent multi-word nav items from wrapping. */
white-space: nowrap;
}
<header class="page-head">
<div class="logo">Logo</div>
<form class="search-form">
<input type="text" class="search-box"
placeholder="Search (this form fills available space)">
</form>
<nav class="site-nav">
<ul>
<li class="site-nav__item">Home</li>
<li class="site-nav__item">Notifications</li>
<li class="site-nav__item">Profile</li>
<li class="site-nav__item">Add Question</li>
</ul>
</nav>
</header>
There are many ways to do this, I prefer using tables because they already have most of the required styles - even if it does add a lot of html. I decided it would be best to create a template and let you change things as necessary:
#header{
width:100%;
height:45px;
table-layout:auto;
}
#header img{
width:45px;
height:45px;
background-color:red;
float:left;
}
#header form{
float:left;
width:100%;
height:100%;
margin:0;
min-width:200px;
}
#header input{
width:100%;
height:45px;
}
#header nav{
float:right;
display:inline-table;
vertical-align:middle;
}
#header a{
padding:10px;
background-color:black;
color:white;
vertical-align:middle;
}
<table id="header">
<tr>
<td>
<img id="logo"/>
</td>
<td style="width: 100%;">
<form>
<input type="text" name ="search" id="search" placeholder="Search"/>
</form>
</td>
<td style="white-space:nowrap;">
<nav>
Home
Notifications
Profile
Add question
</nav>
</td>
</tr>
</table>
Apologies, I tried keeping my structure as similar to yours as I could but there are a fair few differences. In any case, I hope this helps!
When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break.
The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.
the wrapper css:
#wrapper {
width: 960px;
margin: 0 auto;
}
and the html (minus content):
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Any help or advice would be great.
EDIT: here is the full css:
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.
What browser are you using? I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No idea why, or if you have this or not, but it may help.
View source of the page you are using and click on the CSS document you link you have linked. It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).
It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head. Things to try;
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
Do you have multiple css files? If so, try to include this stylesheet last.
Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).
I would love to see your entire solution if possible, so i can poke around :)
I have never had this problem before. You may not have the link correct
Make sure that you attached you style sheet correctly:
<link href="Default.css" rel="stylesheet" type="text/css" />
If it is in a folder (say Styles for ex):
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
If your webpage is in a folder then you need to add "../" to the front
<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />
You can also try !important
#wrapper {
width: 960px;
margin: 0 auto !important;
}
If that does not work, then right click the wrapper element and click "inspect element" in chrome. This will show you all applied css on that element, and what has been over written by what. This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>