I have this site header I'm working on but I can't get the logo and the site title to line up horizontally. I'm relatively new to CSS so would appreciate any hand-holding anyone can offer please ;-)
The logo image is styled with:
.logo {
float:left;
}
Whereas the h1.site-title and h2.site-description text is styled thus:
h1.site-title, h2.site-description {
position:relative;
margin-left: 130px; !important
}
I'm pretty sure I need to make another DIV and can't get the positioning right so the logo is at the left, then immediately next to it the site title/description.
(it should be #logo) Floating them both left works
#logo {
float: left;
}
.home-link {
float: left;
}
and remove the margin-left
There are a couple of things that I would recommend changing:
In your HTML, you have logo set to an ID, so in your CSS it should use a # instead of a period.
You do not need to tag qualify your classes in your CSS, meaning the h1 and h2 are not needed, just .site-title and .site-description should work.
Avoid using !important whenever possible. It makes your code very hard to adjust later.
instead of working with .site-title and .site-description work with their wrapping container, .home-link. Float both it and #logo left.
If you want them to line up side by side, you will have to change the width of home-link to something smaller than 100%.
remove the margin-left.
so your CSS would look like this:
#logo { float: left; }
.home-link { float: left; width: 75%; }
Related
On my homesite I have slideshow with cars. My problem is, that slideshow is on the next line (or block I should say) under paragraph "Vitajte!". I want that slideshow next to paragraph "Vitajte!" on the right side. Here is link on my CSS. Thx for help :)
Just add:
float:left;
to div#welcome;
div#welcome
{
float: left;
}
Add the above css to the div, which will bring your slider to right side. If you want to move the slider little down and move left add
.ppy-placeholder
{
margin-top: 55px !important;
width: 450px !important;
}
I suggest you to make the below changes to your CSS and get the paragraph to align right.
The CSS:
div#welcome {
display: inline;
height: 148px;
margin-top: 0;
text-align: right;
width: 290px;
}
EDIT
If you want to keep the paragraph to the same place and move the slideshow inline with the paragraph, you need to add a float:left to the div#welcome
For Instance,
div#welcome {
float:left;
}
Hope this is what you are looking for.
Im having trouble lining up the thumbnails (4 blocks). The last block broke to the second line. Is it the width of the container inside div? If I minimize the browser smaller, the blocks are lined up just fine, but no gaps between them. http://magnixsolutions.com/dev/test/test.html.
Also why is the cursor centered in the textfields?
To position the cursor to the left in the textfields, you can use this:
.fname, .lname, .zipcode
{
text-align: left;
}
Yes, it is. Your thumbnails container is shorter than your thumbnail sum their lengths together with their gaps.
Try something like this:
.thumbnails {
margin-left: -15px;
...
}
.thumbnails li {
margin-left: 15px;
...
}
.thumbnail {
width: 220px;
...
}
This is the modification to your bootstrap css file. So if it does not take any effect, apply !important to enforce them.
UPDATE:
you forgot to apply:
.thumbnails > li {
margin-left: 15px !important
}
I'm trying to come up with a solution for this problem.
I have a control where the background is an image.
The text that I would like on the form is included in the bg image, however for the purpose of accessibilty, I'd like to include it in an H3 tag.
The problem I have encountered with the solutions I have is that the space is still allocated and I need it to be supressed. It also needs to be Google friendly too.
Here's 2 solutions I have:
text-indent:-999px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
Any ideas?
The normal way to hide elements is to use one of the following:
visibility:hidden; which hides the element but still takes up space.
display:none; which hides the element and does not take up space.
I believe the second is what you want in this instance.
Well, first of all
display: none;
But, if you want, there might be other solutions for styling your heading tag
/* on its container */
overflow: hidden;
/* on h3 tag */
float: left;
margin-left: -100%;
or
font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;
You may also need to set/reset few other properties, to clear any other space around your heading, like
margin, padding, white-space, text-indent, border, etc.
You can give font-size:0; to your h3 tag HEADING will be in your code with your background.
And this will help you in SEO also..
DEMO
HTML
<div id="wrap">
<h3>heading</h3>
</div>
CSS
#wrap {
height: 230px;
width:660px;
background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0;
}
#wrap h3 {
font-size:0;
}
As an example I'm trying to create a thumbnail, but my automatic img css as listed below is applied
img, img a {
border: none;
margin-top:10px;
margin-bottom:10px;
}
I can't make sense of it in my mind for some reason. I know the syntax is probably simple, but I can't seem to remember it.
Thanks
Chris
The reason you can not add margin to your images is because img elements are, by default, inline. It means you can not give them dimensions, or add margin from the bottom or top (and some other stuff you should probably read about).
This means that in order to give img element margin from top or bottom, you need to declare it as a block, or rather inline-block. This is achieved using
img { display: inline-block; }
Then you can add away your margins, and viola:
img {
display: inline-block;
margin: 10px 0; }
Are you trying to style all images a certain way, then exclude images within a certain container div? If your container div is called #wrapper, then do something like this:
#wrapper img,
#wrapper a img /* assuming that's what you meant rather than img a */
{
/* undo what you did above for images inside #wrapper */
margin-top: 0; margin-bottom: 0;
}
Such loose selectors for img can be troublesome because images are used all the time in different contexts. I prefer to style only images that are inside a #content div, or similar.
Please see my jsfiddle example below.
Can anyone figure out what I am doing wrong here?
I am attempting to use a third party plugin called Smart Wizard it all works except for this one aspect as shown in the jsfiddle.
The [X] is on a new line, it should be directly to the right of the error message.
http://jsfiddle.net/jamesjw007/4wJv4/1/
just add
.content { width: 90%; float: left; }
example fiddle: http://jsfiddle.net/4wJv4/9/ - Adjust the width of content element as you prefer
Try adding this to the Stylesheet..
It worked..
.swMain .msgBox .close {
float: left;
}
You have to float all the elements to
the Left in the same tag to get the
elements to be in One line.
Just the "float" will do..
You need to float the content div as well as the close icon. In addition to this, you might want to float the close button to the right of the message box as opposed to immediately after the text.
.swMain .msgBox .content { float:left; width:auto; }
.swMain .msgBox .close { float: right; }
I've updated your fiddle with these changes - http://jsfiddle.net/4wJv4/19/