I have successfully placed an image on the left like so:
<div class="Carl1">
<a href="https://rads.stackoverflow.com/amzn/click/com/1940412145" rel="nofollow noreferrer" target="_blank"><img class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />
<span><strong>Amazon</strong></span>
</a>
</div>
And CSS:
.Carl1 {
text-align: left;
}
.image-left {
float: left;
margin: 15px 20px 10px 0px;
border: solid 4px #fff;
}
However my text appears on the upper right of the image when I want it to appear under the image. What am I doing wrong?
Float needs to be cleared. Also you used span element, what is inline element by the default, you will need to set span element as block element.
Here is a JSfiddle link.
DEMO
HTML:
<div class="Carl1">
<a href="http://rads.stackoverflow.com/amzn/click/1940412145" target="_blank">
<img width="100" class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />
<span class="title"><strong>Amazon</strong></span>
</a>
</div>
CSS:
.Carl1 {
text-align: left;
}
.image-left {
float: left;
margin: 15px 20px 10px 0px;
border: solid 4px #fff;
}
.title {
clear: left;
display:block;
}
The float needs to be cleared otherwise the text will attempt to Wrap around the image
.Carl1 span{display:block;clear:both;}
Your question indicates you haven't quite figured out how floats work. The answers here will solve your problem today, but I suggest learning more about CSS positioning.
Here is a really great and classic tutorial on the subject. It’s old, but it’s good stuff. You will have a lot easier time with CSS afterwards, I promise.
Also, I’d specifically suggest that you don’t float this image by itself; instead, float the the whole container (.Carl1) and give it a width.
Compared to the other answers on this page, this solution is closer to expressing your intention in code. I assume you consider the whole Carl1 div to be essentially one object whose contents should appear together. Floating them as one is true to this intention :)
Related
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
I am trying to put two divs beside each other and have it so when you hover over an image some text is displayed. This is my CSS:
.german img, chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover, chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content, .chembond-content {
display: none;
}
.german:hover .german-content {
display: block;
float: left;
border: 1px solid;
}
.chembond:hover .chembond-content {
display: block;
float: right;
border: 1px solid;
}
.german-content p, .chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond {
float: right;
}
.german {
float: left;
}
.german, .chembond {
display: inline;
overflow: hidden;
}
And this is my HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/german.png" height="60" width="50" />
<section class="chembond-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
</section>
This is what it currently does: http://www.penguinie.co.uk/#projects
Also, Is there an easier way to do what I'm trying to do? (which is to put both of the images side by side and have them stay side by side when I hover over them and the text appears).
Use display:inline-block; instead of display:block; on the divs.
Using display:inline-block you can still assign width to an element, unlike display:inline. Block level elements will always take a new row.
However, you might notice that there's space in between:
If needed, this can be easily fixed by applying this to the parent element: font-size:0;.
Here's a fiddle about it.
In general, I use #Christian's inline-block solution.
But another possibility is using float: left.
Remember to clear the floating (e.g., with <div style="clear:both"></div>) after your floating elements.
I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div>
<span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
<span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
Based on a proposed a solution for a similar problem here, you can do something like this.
Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services {
overflow: auto;
padding: 17px 0 9px 0;
}
.main-services li {
list-style: none;
float: left;
border-right: 1px dashed #E53B00;
padding-right: 14px;
}
.main-services li a {
display: block;
height: 78px;
color: #ED5D04;
text-decoration: none;
}
.main-services li a img {
vertical-align: middle;
}
.main-services li a span {
display: inline-block;
vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
<li class="service-1">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>Some text goes here</span>
</a>
</li>
<li class="service-2">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text here</span>
</a>
</li>
<li class="service-3">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text goes here but this text overruns</span>
</a>
</li>
</ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically.
The following resource seemed to be exactly what I need:
http://www.css4you.de/Texteigenschaften/vertical-align.html
and
http://www.css4you.de/example/vertical-align.html
Here's my HTML:
<div style="border: 1px solid purple;">
<h1 style="border: 1px solid red; display: inline;">Textext</h1>
<span id="logindisplay" style="border: 1px solid lime; float: right; vertical-align: middle;">Log In</span>
</div>
The CSS ID selector for logindisplay doesn't exist. h1 is just
h1
{
font-size: 18pt;
}
I basically did everything as in the resource above, but it doesn't work - neither on IE9 nor on FF. Here's what I get:
Does anybody know what I'm doing wrong?
Note: Workarounds/hacks aren't desired. (One would be to set padding-top: on the span...)
Try this
#logindisplay { line-height: 18pt; }
...and get rid of your vertical-align property.
vertical-align doesn't work in the way you thinkit does, it seems. Take a look at http://css-tricks.com/what-is-vertical-align/ for a good explanation of what it does.
Using float:right negates the vertical-align as you found. Mark's suggestion doesn't work with position:relative on the div? In which case, line-height seems like the easiest way.
make your outer div be display: table-cell, or give it a line-height of appropriate size.
vertical-align is one of the stupidest bits of CSS, and rarely works as you'd expect without having to hack up containing elements: http://phrogz.net/css/vertical-align/index.html
A different approach would be putting position relative on the parent div and then absolute position the span like this:
#logindisplay {
position: absolute;
right: 0;
top: 50%;
margin-top: -9px;
}
Example
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});