I have the following HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.rtwilson.com/robintheme/style.css" />
</head>
<body>
<div id="branding">
<div id="blog-title">
<h1>Robin's Blog</h1>
</div>
<div id="logo-div" style="float:right; display:inline;">
<img class="logo" src="http://rtwilson.com/academic/mugshot.jpg" height=100px>
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
</div>
</body>
</html>
I am trying to get the image to display to the right of both of the h1's but without creating a gap between the h1's. That is, I would like the top of the image to be aligned with the top of the first h1, the image to be on the right, and the spacing between the h1's to be exactly how it would be without an image there.
I thought it could do this by floating the image to the right and setting the display property to inline, but I've tried this and there is a gap between the h1's.
How can I fix this?
Fiddle: http://jsfiddle.net/9vRLH/
Demo: http://jsfiddle.net/9vRLH/embedded/result/
Try the below css and HTML: Please se inline Css in image div.
#blog-title {
float: left;
font-family: 'Droid Serif',serif;
font-size: 40px;
font-weight: 400;
}
#blog-description {
clear: left;
float: left;
font-family: 'Droid Serif',serif;
font-size: 20px;
}
<div id="blog-title">
<h1><a rel="home" title="Robin's Blog" href="http://127.0.0.1:8888/wordpress/">Robin's Blog</a></h1>
</div>
<div style="float: right; display: inline;" id="logo-div">
<img height="100px" src="http://rtwilson.com/academic/mugshot.jpg" class="logo">
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
I'd float the image right and give the divs some right-margin, like this:
<div id="branding">
<img class="logo" style="float:right;" src="http://rtwilson.com/academic/mugshot.jpg" height="100">
<div id="blog-title" style="margin-right: 110px;">
<h1>Robin's Blog</h1>
</div>
<h1 style="margin-right: 110px;" id="blog-description">A PhD student talking about interesting things</h1>
</div>
Fiddle: http://jsfiddle.net/Qch6u/
I recommend something like the following for these reasons:
The HTML is more concise (less elements), and reflects better the intent of your titling--a main title with a subtitle description. Generally, one should only have a single h1 tag on a page, and this places both the relevant pieces into a single tag. A search engine will now read it as a single title "Robin's Blog A PhD student talking about interesting things" instead of as two items "Robin's Blog" ... "A PhD student talking about interesting things."
Since you want the image to not interfere at all with the text, then using absolute positioning to effect that makes sense, as it will never cause any gaping in the text, nor reposition itself down the page. Of course, it is then good to at least give a min-width to keep from any overlap of the image to the text.
HTML
<div id="branding">
<h1>
<a id="blog-title" href="http://127.0.0.1:8888/wordpress/" title="Robin's Blog" rel="home">Robin's Blog</a>
<span id="blog-description">A PhD student talking about interesting things</span
</h1>
<img src="http://rtwilson.com/academic/mugshot.jpg" >
</div>
CSS
#branding {
padding-right: 110px;
position: relative;
min-height: 100px;
font-family: 'Droid Serif',serif;
min-width: 200px;
}
#branding img {
height: 100px;
position: absolute;
top: 0;
right: 0;
}
#blog-title {
color: black;
font-size: 40px;
font-weight: 400;
text-decoration: none;
}
#blog-description {
display: block;
font-size: 20px;
}
Related
I'm having issues trying to create a "banner" above the navigation bar on my website using CSS/HTML.
I can't get a background color to display in the banner, and I also can't manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.
HTML:
<header>
<link href="index.css" rel="stylesheet">
<div class="banner">
<img src="logo.png" class="profile-picture" alt="Header Logo">
<h1 class="title">Header info 1</h1>
<h2 class="title">Header info 2</h2>
<h3 class="title">Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
</header>
Here is the CSS:
.header img{
float: left;
}
.header .banner{
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.header .banner .title{
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
So a summary of the problems I'm having:
I can't get the logo to float to the left of the title headings (they appear underneath the logo)
I can't get the background color of the banner to change
I can't get the font style or font color to change
I know it's probably the way I'm referring to these elements in the CSS, but I can't figure out how to refer to them properly.
Thanks in advance for your help
I can't get the logo to float to the left of the title headings (they
appear underneath the logo)
You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.
I can't get the background color of the banner to change
Use the background-color css-property.
I can't get the font style or font color to change
Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.
Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.
I have replaced the css class to inline css checkit out if it can help
<div style='background-color:red'>
<img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg" style="float:left; height: 80px; padding:5px;" alt="Header Logo">
<h1 class="title" style='font-size: 25px; color:#ffff00;'>Header info 1</h1>
<h2 class="title" style='font-size: 15px; color:#00ff00;'>Header info 2</h2>
<h3 class="title" style='font-size: 10px; color:#0000ff;'>Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
Your specificity in your CSS is wrong. If you amend these to the code below you'll get the behaviour you're looking for.
.banner img{
float: left;
}
.banner {
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.title {
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
I'm making a menu section that a profile png with a sign in next to it. It needs to be an anchor all together, that way when you hover over it it's a link that goes to the log-in page, both the img and text but all together... If I'm making sense to you. I cant figure it out. Below is code so far:
<div class="signin-div topbar-section">
<a class="sign-in" href="#sign-in"><img class="signin-img" src="images/profile-icon.png" alt="profile-icon">Sign in</a>
</div>
And in CSS:
.sign-in {
float: left;
font-size: 90%;
padding: 12px;
margin-left: -14px;
}
.signin-img {
width: 25px;
margin: 10px 10px;
float: left;
Disclaimer, this code works (centered with the rest of the code for the top-bar-ul and it's not what I want it to be regarding one big anchor) I know it comes up not looking correctly as it should.
I'm not really sure what you're looking for but if you want an image and text to work as a link when you need to have a group/block as the link. (sorry if the way my words put it seams weird/confusing. in that case, I hope my example will do the work)
for example:
<html>
<body>
<div style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
<a href="http://google.com" style="text-align: center;">
<div>
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png" alt="user Image">
<br>
user
</div>
</a>
</div>
</body>
</html>
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank.
I am creating a page of links on a single html page with embedded css style for use in a browser window.
I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.
So far I have tried the below HTML:
<html>
<body>
<div class="wrapper">
<div class="div_body_side1">
<div id="div_category01">
<p>
<A HREF="http://www.webaddress" > Short Description
</A>.................... Longer description of where this link will take you
</p>
</div>
</div>
</div>
</body>
</html>
I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div.
<tr>
<td>
<A HREF="http://www.webaddress" > Short Description</A>
</td>
<td>
Longer description of where this link will take you
</td>
</tr>
Will I have to create two more side-by-side divs inside each category to achieve what I'd like?
I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.
I apologise for my lack of expertise, but I really have been looking for a solution for days.
Thank-you in advance for any assistance.
.............
..................................................
Hello again.
Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:
link1link2link3 explanation1explanation2explanation3
Here is what I used:
<div>
<span class="link">
Whatever</span>
<span class="explanation">Whatever explain</span>
<span class="link">
Google search
</span>
<span class="explanation">Secure Google search page
</span>
<span class="link">
<a href="http://www.google.com/ncr" >Google search</A>
</span>
<span class="explanation">US Google search page
</span>
</div>
...with the following CSS:
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
I shall now try the other solutions that have been kindly provided.
Thank-you all so much.
.......................................
Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?
Will now try Urg mu's solution. Cheers.
Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?
On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?
Thank you all again. I am learning a lot.
Cheers.
Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:
http://jsfiddle.net/wreckanoid/CdN2z/
Direct answer:
Use two spans to wrap links and explanation. Example
<div id="catgory01">
<span class="link">Whatever</span>
<span class="explanation">Whatever explain</span>
</div>
Then define style of the two spans
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
The reason to wrap the link is you may not want all your links behave like this.
This answer should work, but you may find problem is your link anchor or explanation is too long, they may overlap. Just pay attention to that.
A further answer: The correct way to explain a link is to use title attribute
Whatever
This way when you hover the link, you get the hint.
In The HTML that you have given add folowing line of code
<style>
.div_body_side1 p a{width:200px;float:left}
</style>
LIVE DEMO
CSS
div { width:400px; border:red 1px solid; padding:10px 0px; }
p { overflow:auto; margin:0px;
background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
float:left; padding:0px 5px 0px 10px;
background-color:#fff;
}
.desc {
float:right; padding:0px 10px 0px 5px;
background-color:#fff;
color:#333;
}
HTML
<div>
<p>
<a href="#link" >IAClient</A>
<span class="desc">QUT Internet Access Client</span>
</p>
<p>
<a href="#link" >AARNet</A>
<span class="desc">AARNet's FTP & HTTP Mirror</span>
</p>
</div>
http://jsfiddle.net/CZt8R/
One simple way is to use float: left and float: right on the link and the description, respectively.
HTML
<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>
CSS
a { float: left; }
.right { float: right; }
Here's a demo.
Edit post update
Two keys to getting this kind of layout:
Use fixed (percentage-based) left-margins for the links, and for the descriptions
Display a long string of ellipses "..............." and use overflow-x: hidden to hide the excess
Another demo.
Here is what I have settled on.
I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use.
Here is the result:
http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/
Here is the code:
http://jsfiddle.net/wreckanoid/zV9Sd/
.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%;
margin-left:15%;
margin-right:15%;
height:auto;
display: block;
overflow:auto;
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;
}
.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display: block;
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}
.div_body_side2
{
clear:none;
float:left;
position:reative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}
#div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}
.center
{
text-align: center;
}
.right
{
float: right;
padding-right: 20px;
color: #cc6600;
}
body
{
margin:0;
padding:0;
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
img.center
{
display: block;
margin: 0 auto;
}
a
{
color: blue;
padding-left: 20px;
}
Here is the HTML:
</head>
<body>
<div class="wrapper">
<H1> Test Bookmarks Menu</H1>
<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>
<div class="div_body_side1">
<div id="div_category01">
<H2>CATEGORY 1 HEADER</H2>
<br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category01 -->
</div><!-- close div_body_side1 -->
<div class="div_body_side2">
<div id="div_category05">
<H2>Category 5 Header </H2>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category05 -->
</div><!-- close div_body_side2 -->
Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)
I will be adding the 'title' tag to all the links, too.
Cheers.