I have the following heading "2015 Annual Architectural Design Convention".
I have it in an h1 tag in my coding. I want it to spread out across the webpage so that it starts on the left and ends on the right (a little padding wouldn't hurt).
I tried doing this by increasing the font but the height becomes too large. I just want it to be around 2 inches in height. I tried span and center tags but they weren't what i was looking for either. Also, I want the text in small caps. Spacing between the letters don't matter as long as it isn't too much.
Any help is greatly appreciated
EDIT: the code didn't show when i first posted. i realized later i did it wrong. Thanks for the down votes though -.- Here's the code:
.heading {
font: 55px;
}
<body class="main">
<h1><span>2015 Annual Architectural Design Convention</span></h1>
<div class="heading"><center>2015 Annual Architectural Design Convention</center></div>
</body>
I tried this later
#heading {
width: 100%;
}
<div id="heading">2015 Annual Architectural Design Convention</div>
Try style .letter-spacing
<h1 style="letter-spacing: 10px;">2015 Annual Architectural Design Convention</h1>
Increase letter spacing distance as per requirement.
It would be worthwhile if you posted some code to show us what you have done. But use this below as a starting point if you wish.
<div id="heading">2015 Annual Architectural Design Convention</div>
#heading {
width: 100%;
}
Here you go
Start using jsfiddle.net
.heading {
font: 55px;
}
h1 {
text-align: center;
}
<h1>2015 Annual Architectural Design Convention</h1>
<div class="heading">
<center>2015 Annual Architectural Design Convention</center>
</div>
Use this:
.wrapper {
margin:0 auto;
width:960px;
max-width:100%;
}
.heading {
width:100%;
margin:0;
padding:40px 0;
}
.heading h1 {
font-size:35pt;
font-family:tahoma;
color:black;
text-align:center;
line-height:35pt;
}
<div class="wrapper">
<div class="heading">
<h1>This is my website</h1>
</div>
</div>
Related
I have a problem with regards to achieving a specific design goal, and I hope you can help me out here.
I made a picture in PS that I hope explains to you what I want:
Every part of this picture should be in an individual tag (for example div), and be placed like this.
The logo should be placed on top of the big picture, with just a little bit of space between the edges. The name is placed on level with the bottom of the picture OR in the middle (whatever looks best).
The headline (new 911) is placed along with the top of the big picture, the description is in the middle (always middle, length of text will vary) and the footer (info info) is aligned with the bottom of the picture.
Is this something anyone could help me with?
I have some code, but it doesn't work exactly as planned. Here's my HTML:
<div class="content">
<div class="left">
<div class="poster">
<div class="poster_img">
<img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" />
</div>
<div class="poster_name">Porsche</div>
</div>
<div class="img">
<img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" />
</div>
</div>
<div class="right">
<div class="header">The new Porsche 911 Turbo. Breaking new ground.</div>
<div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div>
<div class="footer">
<div class="info1">info</div>
<div class="info2">info</div>
</div>
</div>
Here's my CSS:
.content {
position: relative;
clear: all;
margin: 5px;
margin-top: 10px;
}
.left {
display: table-cell;
}
.poster {
position: relative;
margin-bottom: -50px;
height: 50px;
}
.poster_img {
display: table-cell;
position: absolute;
}
.poster_name {
display: table-cell;
padding-left: 52px;
font-size: 15px;
}
.img {}
.right {
display: table-cell;
padding-left: 10px;
}
.header {}
.main {}
.footer {}
.info1 {
display: table-cell;
}
.info2 {
display:table-cell;
padding-left: 25px;
}
Hope you can help me out here! :)
Aleksander.
Positioning elements with CSS is not as complicated as it seems (if your design concept is good).
I like using grids to cleanly position elements. However most of the time position: absolute; with a position: relative; on the parent element will suffice.
Read on about this here: Absolute Positioning Inside Relative Positioning
Also try to find a site that has a similar design and explore the source. It looks like porsche would be a good place to start. There are also lots of "Design Inspiration" sites were you might find what you're looking for.
Good luck.
Rather then going into the depths of positioning, you may want to consider a simple float in combination with clear. usually works well enough - given the right stack order.
Really simple question, how do I force a link to appear inline with a h2 heading?
I have the following code : http://jsfiddle.net/jezzipin/6DpPX/ and I'd just like the 'Back to top' link to appear inline with the 'Social Media' heading but everything I try doesn't seem to work. Even the use of spans.
Any help would be greatly appreciated.
jme1988
N.B. Just to be clear, this is the effect I am after:
Add this css
.b2t_link{
float:right;
margin-left:0;
}
.page_title{
display:inline-block;
vertical-align:top;
}
Demo
Apply the following styles:
.page_title{
font-size:18px;
font-family: Arial,Helvetica,sans-serif;
font-weight:400;
padding-left:16PX;
/*color:#053452; Dark Blue*/
color: #729ABD;
float:left; //Added float
}
.b2t_link{
float: right;
margin-left: 794px; //Reduced margin by width of page-title
font-family: 'FamiliarProBold',Arial,Helvetica,sans-serif;
font-size: 11px;
color: #729ABD;
}
.two_col_textAndImage_text{
width: 720px;
font-size: 11px;
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 10px;
min-height: 300px;
}
#main-content{
clear:both;
}
Then in the html wrap the image and text in a div with id main-content.
<div id="main-content">
<div class="two_col_textAndImage_text">
<h2 class="item_title_no_image">Social Media Integrations</h2>
<p class="item_text_no_image">
Social Media is fast becoming a channel for advertising, promoting and applying for vacancies. Some organisations have fully embraced this within their recruitment strategies whilst others have not yet or do not wish to adopt this trend. Whatever the view of your own organisation's recruitment channels, ATS2go has been designed to integrate seamlessly with social media. <br/><br/>
Social Media buttons, such as Facebook, Twitter and LinkedIn can be embedded within you vacancy postings enabling visitors to your site to forward a link to their friends and contacts about your vacancies. In addition, ATS2go includes automative "Job Tweets" for your vacancies which include a link back to your recruitment page; people simply click on the link within the Tweet and can then find out more about the role and hopefully submit their application immediately - simple, easy and free! <br/><br/>
</p>
</div>
<div class="two_col_textAndImage_image">
<img / src="https://text-development.ats2go.com/img/content_images/social-media.jpg" width="250px"/>
</div>
</div>
Example: http://jsfiddle.net/6DpPX/8/
You could put the link inside your h2.
http://jsfiddle.net/lollero/49VNH/1
Alternative view: http://jsfiddle.net/lollero/49VNH/1/show
HTML:
<h2 class="page_title">
Social Media
Back to top
</h2>
CSS:
.b2t_link{
float: right;
}
I've got an assignment for an introductory web design course, and so far it's been real easy, but when the professor introduced div and span tags, I really lost my momentum and have fallen into a slump. I've registered for the course late, and as luck would have it, an assignment on div and span is due tomorrow.
I have been using w3schools extensively thus far, as well as StackOverflow itself, but I can't really find a specific answer to my question, or the answers I find are well beyond my 'skill level'.
I want to emulate a website provided to me; no source code is provided, just an image of what the final product should look like, as well as resources like images, text sizes, etc. Here is the link to the assignment itself.
http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf
I've gone through the first few bits myself, but the meatier portion of the assignment I'm lost on. I need to make one large div element (I'm assuming), and inside that I need more div elements. I've got to this area:
"Below the main heading is the page's overall content area, with an overall 32% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)"
The image in the link is how it should look, and so far I have everything above the rounded border section with all of the meatier content. Here is what I have thus far:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="http://www.cosc.brocku.ca/Offerings/2P89/Images/rotten.gif"
type="image/x-icon">
<title>Abraham Lincoln: Vampire Hunter - Rancid Tomatoes</title>
<link href="abe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="banner" style="background: url
(http://www.cosc.brocku.ca/Offerings/2P89/Images/bannerbg.png) repeat-x;width:100%;height:50px;">
<img src="http://www.cosc.brocku.ca/Offerings/2P89/Images/banner.png" alt="">
</div>
<h1>Abraham Lincoln: Vampire Hunter (2012)</h1>
<div class="reviewshell">
<div class="reviewleft">hi</div>
</div>
</body>
</html>
...and style sheet...
.banner {
margin:0px;
text-align:center;
}
.reviewshell {
margin-left:auto;
margin-right:auto;
border:4px solid;
border-radius:20px;
border-color:grey;
width: 800px;
}
.reviewleft {
margin:0px;
text-align:left;
}
.reviewright {
}
.reviewbottom {
}
body {
background-image:url("http://www.cosc.brocku.ca/Offerings/2P89/Images/background.png");
background-attachment:fixed;
font-size:8pt;
font-family:Verdana, Tahoma, sans-serif;
margin:0px;
}
h1 {
text-align:center;
font-size:24pt;
font-family:Tahoma, Verdana, sans-serif;
font-weight:bold;
text-shadow:#999999 3px 3px;
}
blockquote {
}
a:link {
}
a:visited {
}
ul.a {
}
I apologize in advance if homework help is frowned upon here; I've been at this for about 9 hours reading up on HTML and I can't find out how to continue. There is no prof or TA available on Sundays unfortunately.
edit; I should probably mention that I don't need a specific answer, just a link to a page or guide that can help me figure it out. w3schools is indepth, but I still can't get it.
That paragraph basically means "put the main content in a div with the following styles":
width: 800px;
margin-left and margin-right: auto; to center it
border: 4px solid gray
border-radius: 20px;
This is a pretty good Smashing Magazine tutorial: http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
I could write up a guide for you if no one supplies a better answer...
HTH.
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.
Simple problem, though apparently not a simple solution.
Example here: http://myhideout.eu/new/
Basically the site consist of two columns, though with no wrappers or anything like it, as I'd really like to do with as little of the sort as possible, partly for the sake of simplicity, but also to make use of the HTML5 semantics, which in my mind don't really include divs, no matter how appropriately they are be named.
However, I'd like to have the sidebar fill up the full height of the adjacent column, which is not as easy as I first thought it would be. I know it's an old problem, but I was sure I had solved it before.
Anyhow, I tried to figure out how to do it without using wrappers or JavaScript. JavaScript is a no go, but that's another story. I was sure that there would be some sort of smart CSS3 feature or something similar, that would solve my problem, without the need for wrappers, but my search for this much need feature was a failure of epic proportions.
So I said to my self: "Damn it! Oh well, just have to use wrappers then."
I was sure it would work. I tried different configurations, but no matter what I did, I couldn't get it to work without setting an absolute height of the surrounding wrapper. Just imagine my disappointment, failing once again when I was sure I had done it before. So again I went searching for a solution to suit my needs. Though a lot more material turned up this time, it was still a failure. The few solutions I found was questionable to say the least.
So, now I'm here again, asking yet another one of those questions which undoubtedly have been asked a quadrillion times before. I am sorry about this, but I really don't know where else to go.
I do hope you can help.
Thanks in advance and best regards.
edit:
This works exactly as I want it too:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
Only problem left is getting rid of that damn div tag ;)
edit:
the css table display properties have been pointed out to me, and it really seems to be what I'm looking for, as the smart solution, but with multiple elements in one row, and only one in the other, I can't figure out how it should be done.
If IE6 compatibility is not a requirement, then I usually will usually do the following html:
<div class="container">
<div class="content">
This is the content
</div>
<div class="sidebar">
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</div>
</div>
And this is the CSS:
.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }
JSFiddle example: http://jsfiddle.net/geC3w/
This works in all modern browsers and Internet Explorer 7 and above, it's also immensely simple, as long as IE6 compatibility isn't a requirement
If IE7 compatibility is not a requirement, use display: table-cell;:
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
}
#wrapper > * {
display: table-cell;
}
#wrapper > article {
width: 600px;
background-color: blue;
}
#wrapper > aside {
width: 200px;
background-color: green;
}
Working example.