I have a header which I constructed like this:
<header class="top">
<a href="">
<span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
<h1 class="right">Carmen</h1>
<h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
</a>
</header>
This should look like this, as someone made this in Adobe Illustrator
Then I applied some css and got to this (in the original there is a Dutch spelling mistake, this one is corrected, the scale is not completely equal either):
The rules:
.top {
display: block;
width: 800px;
float: right;
}
.top a {
background-image: url('../img/logo.jpg');
background-size: 150px 150px;
background-repeat: no-repeat;
padding-left: 150px;
height: 175px;
display: block;
overflow: hidden;
}
.top .right {
text-align: justify;
width: 650px;
}
.top span, .top h2 {
color: #E02C33;
font-size: 1.8em;
}
.top h1 {
color: #B02025;
font-size: 4.7em;
text-transform: uppercase;
}
I have two issues here:
How can I justify both the <span> and <h2> to their equal lengths (my justify is not working as expected)
How can I constraint "CARMEN" such the width and height are pre defined, the spacing between characters is rendered by the browser
The problem with justify is that the last line is usually no justified, because the letter spacing would be too long.
If you can use CSS3, there are new attributes, which make this possible:
http://www.css3.com/css-text-justify/
If the header always stays the same, you can also adjust the font-size and letter-spacing attributes, until it fits.
One important thing is that while creating graphics initially in adobe photo shop or illustrator etc. is different and when we implement in actual webpage the output may vary little bit in some cases. So we have to write css like that so we can accomplish the desired design. Thanks.
see fiddle for code and demo
Fiddle: http://jsfiddle.net/ybf25/3/
Demo: http://jsfiddle.net/ybf25/3/embedded/result/
Note: As i don't have the Rose image so i was not able to create Demo as your given image in question.
See screen shot for output: Please open the screen shot in new window to see clear image.
Related
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve ยท vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I'm playing around with the box models on my test webpage.
Everything is working properly, except when I resize my browser.
I am trying to get the title to cut in half and appear underneath the first bit of the title if the browser is resized to cover about half of the title.
This, however, is proving a problem.
Here is my code for this specific problem:
#header1 {
color: darkorange;
width: 500px;
height: 30px;
min-width: 300px;
min-height: 30px;
max-width: 500px;
max-height: 70px;
}
Currently, when I resize my browser, a part of the title disappears behind the edges of the browser.
I'm guessing I misunderstand the working of max/min-height/width.
Do I need to use the overflow command here?
<h1 id="header1">
Welcome to Luc's Amazing Website!
</h1>
<br />
Tell me if you need more code, I don't know how much is exactly needed.
It's hard to say without seeing more of code, though following should be enough to achieve the result you are looking for.
#header1 {
color: darkorange;
min-height: 30px;
max-width: 500px;
max-height: 70px;
}
see the example in fiddle, https://jsfiddle.net/sh0fevt1/2/
To achieve this you need to place both parts in separate boxes. Also width: 500px; was not enough to fit the whole title in a single row.
#header1 {
color: darkorange;
}
#header1 span {
display: inline-block;
}
<h1 id="header1">
<span>Welcome to Luc's</span> <span>Amazing Website!</span>
</h1>
<br />
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I've got some words like WORD and REALLYLONGWORD. Both have light font and I want them to become bold on mouse over. Both have float: left; width: auto;. I can't give them fixed width.
The problem is when I hover WORD, the REALLYLONGWORD jumps to the right because WORD gets bolder font (and larger width value). Is there any CSS-only workaround to that?
EDIT (I can't answer my own question, so I'm posting answer below):
I found some CSS-only solution. HTML:
<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>
CSS:
.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; }
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; }
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }
Basically, I create one more hidden container with BOLD font (its width is main width) and put LIGHT font inside. After hover it still has width of BOLD word so there is no jumping.
You do not want to add any width to fonts at all, I suggest you delete the width property competely. (I also hope you noticed the writing error in your css, with should be width)
The next thing is assign a class to the the ahref this can be easily done with SPAN tags
once done in the css just do:
.firstlinkclass{
font-weight: bold;
}
Use letter spacing. For example {letter-spacing:0.04em}
If you style your WORD with enough letter spacing to make it the same overall width as the same word when it is bold, and remove the letter spacing when it is bold, everything else will stay put.
It works - try this (this just demos the concept - not what I'm recommending for production):
<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>
I know this was asked a long long time ago, but I just came up with a solution to fix the jump that works well so I thought I'd share.
Instead of making the font bold on hover, make it have a text-shadow. No jump, same effect, one line of CSS.
I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)
The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.
I need to change the HTML markup from
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
to something similar to
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
while keeping the same style as in the link above.
Thanks in advance.
See: http://jsfiddle.net/thirtydot/HksP2/
It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.
This is based off a previous answer. Quoting myself from that answer:
Note that the line-height and padding adjustments can be very
tricky to get right.
line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.
update:
I just thought of a way: http://jsfiddle.net/2LEmF/10/
Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.
I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.
Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}
You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.
You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/
I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/
Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.