I'm new to this stuff and trying to design a mock car sales website for a project, but I need some help, bearing in mind a beginner, I have designed a basic layout with divs, and I want to put a badge in the top right of the banner, but the logo went in fine using the following and CSS:
img.logo
{
position: relative;
top:15px;
left: 24px;
}
But when I try to put in a "badge" in the right hand side it moves the logo?
Anyknow know how to keep them both on the same line, also in general whats the best way to postion elements within a webpage? CSS or seperate divs?
when using different div's you should use float:right; and clear:both; in the next element.
but try to set it as a background-image:
background-image:url('./url/to/file.png');
background-repeat:no-repeat;
background-position:right;
to answer your general question: both!
use div's and position them with css.
Hard to say without the knowing the html but I would look at display:inline-block and float:right
CSS is cascading style sheets, and it is a styling language. A div is a tag belonging to the markup language HTML.
I would encourage you to follow tutorials on both css and html. There are a gazillion online. Also, make sure you learn how to inspect web pages and view source, so you can learn from what others have done. Best of luck in your endeavors!
Try to use
img.logo
{
position: absolute;
margin-top: 100px;
margin-left: 100px;
}
just change the value of margin-top and margin-left until you place it on your desired position. you can also use negative ex. -100px;
Related
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
So I'm making a jQuery slideshow using the jQuery cycle plugin.
Part of the code generates an <input type="button"> with a value from 1 to i (where i equals the total number of slides)
I'm trying to style these buttons so that they appear on top of the image in the slideshow. However when I try to absolute position the buttons they all stack on top of each other. I understand why this is happening, I just don't understand how to get around it.
This is how I'm targeting the buttons the JavaScript is generating.
input[type=button] {
position: absolute;
left: 400px;
}
How do I prevent the buttons from stacking?
If Position is absolute, you must define left and top for each separately, else it will stack up,
Or you may use position:relative with margin:5px; float:left;
thank you,
Instead of trying absolute positioning, try floating the image.
input[type=button] {
position: relative;
float: center;
padding: 10px;
}
This should eliminate the stacking and you can also easily add borders and customize this to be whatever you want. This is just a general description of what I thought was necessary .
I used tags instead of buttons, but I don't think it should make too much of a difference. Anyways, if you want to go about making it vertical, I would just go like this:
HTML:
<h1>Example</h1><br />
<h1>Example1</h1><br />
<h1>Example2</h1><br />
CSS:
h1{
position: relative;
float: none;
padding-bottom: 10px;
}
This is fairly simple CSS work so it won't take you too far, but this is a good start. Also, I would never recommend using absolute positioning unless you're only dealing with one object instead of several since it creates a stacked look. Hope this helps.
I have built a small breadcrumbs example cloning some functionality from Google's design. I have been looking to get the arrows to display on top of each-other so there isn't any white space. I have tried negative margins, possibly positioning but I wasn't able to get anything working.
Below is a link to Google's working example, along with my current demo example and a screenshot of why the breadcrumbs aren't working currently. Appreciate any help, I'm also happy to clarify anything!
Google's working example
Demo(taken offline sorry!)
Current bug screenshot:http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (sorry this was also deleted!)
The Google implementation is using postion: relative; margin-left: -13px in the CSS but at the same time they are using inline styles to give a different z-index to each link like this: image
Use javascript or your backend script to loop through each link and give each link a lower z-index.
try this:
.crumbs li {
display: inline;
float: left;
margin-right: -11px;
position: relative;
}
so they fit on eacht other. now add this:
.crumbs li:nth-child(1) {
z-index:10;
}
.crumbs li:nth-child(2) {
z-index:9;
}
.crumbs li:nth-child(3) {
z-index:8;
}
etc
the only problem is, nth-child is css3, so it's bad for your cross browser support.
You could also add classes to ever li, like "li.first li.second li.third" etc and give them decreasing z-indexes. Then it should work
Well, Google's use sprites, relative positioning and incremental z-indexes. I think you should go with the same technique. They implement the z-indexes as inline styling with the style="" attribute, which seems acceptable in this situation, especially if they are generated with PHP later on.
Another (somewhat shoddy) way of doing it is to add a wrapper that has the same background image. e.g.
<li>
<div style="float: left; background-image: url('img/bg-crumbs.png');">
2011 Writing
</div>
</li>
for all but the last one.
Add an left: -12px; to the styles of the li elements of the breadcrumb. That would only work if their position is set to relative;
Additionally, for my solution to work, add a PHP or JavaScript for example which add to each element style="z-index: 10;". The script should automatically increase the z-index property. If you are making the blog static etc. with no PHP or JavaScript set the z-index manualy.
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here