I'm pretty terrible at CSS/design so I'm struggling with some CSS here.
The page looks fine when loaded in a full screen browser at 1920x1080, however, as soon as you minimise or load the page on a mobile device the header content completely loses its placing but the body is fine.
Here's the CSS elements in question:
#header {
background: url(assets/header_bckg.gif) repeat-x ; height:120px;
}
#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}
#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}
#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }
#avatar_online {
background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
background-color: #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_offline {
background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_playing {
background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover {
color: #85B0DF;
cursor: pointer;
text-decoration: none;
}
As always, help is greatly appreciated.
Make sure your CSS and HTML are valid. As others have pointed out, there is no such thing as float:mid-left. Also, if your jsfiddle is indicative of your HTML, you're probably throwing browsers into quirksmode, because your HTML isn't structured properly (your first three tags need to be wrapped in a <head> tag, everything needs to be wrapped in an <html> tag, and the very first line should be <!DOCTYPE html>). Use the W3C's HTML validator and CSS validator to ensure your code is correct. Only then can you begin to fix other issues.
Learn what the various CSS declarations do. While your CSS may be valid, it doesn't mean it's right. This: #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; } will technically validate once the float part is fixed. However, position: absolute and float are mutually exclusive -- float doesn't work when position is absolute or fixed. It will also help to learn how padding and margin affect the positioning of the element, and how they differ from one another. Finally, vertical-align doesn't work at all unless the element is a table cell, or display is set to table-cell (and the table-related set of display properties has its own quirks, so you can't necessarily just throw display: table-cell on an element and expect it to work a certain way).
Learn how elements naturally behave, so that you can work with them, instead of against them. Make sure you know how block, inline, and inline-block elements behave, and then work with them to get the layout you want, instead of throwing display: inline-block on everything and hoping for the best. The same goes for things like links (which will naturally have cursor: pointer on hover, unless you've disabled it elsewhere). Doing this will substantially clean up your CSS, making it easier to maintain. It may also clean up your HTML, as you find out what wrapper elements you truly need or can do without.
It's a little difficult to tell what the intended result should be at smaller or "mobile" widths, even with the screenshots that you included above.
It looks like there are a number of issues with your HTML, too. Be careful with things like the <font> tag (it's deprecated as of HTML4).
That said, fixing things in your CSS such as float: mid-right and float: mid-left, which are both invalid, should help a bit. Additionally, you might want to investigate CSS positioning - specifically, you'll likely want to use position: relative on your #header div.
Take a look at this slightly cleaned up version of your example - with background colors added to see where the header ends and what space the navigation occupies.
It looks like you have multiple issues but it is hard to tell without seeing your HTML as well. For starters, #menu { margin-left:550px; } is going to be part of the problem if you are trying to align on the left edge.. You should also know that float:mid-right; is not valid CSS. Check out http://www.w3schools.com/cssref/pr_class_float.asp for more information on float.
EDIT AFTER JSFIDDLE
Put your <div id='header'> inside of your <div id='main'> and change your #menu css to be:
`
#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}
`
Since you already have a width defined on your menu, you can use margin: 0 auto; to keep it centered based on window size. This will allow you to remove your margin-left and keep it from being pushed to the right.
Related
After messing around with pseudo element css for a rather long time I've come up with a solution to the heading tag double ended custom image underline I required using the following code:
h2{
clear:both;
position:relative;
color:#000;
margin-left:83px;
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size:1.5em;
float:left;
padding:0px 0px 10px 0px;
}
h2:after,
h2:before{
content:" ";
background:url(http://i.stack.imgur.com/AulCS.png);
display:block;
width:83px;
height:31px;
position:absolute;
bottom:0;
left:0;
margin-left:-83px;
margin-bottom:-10px;
z-index:-1;
}
h2:after{
background:url(http://i.stack.imgur.com/ux1ed.png);
right:0;
left:auto;
margin-right:-83px;
}
<h2>Frequently Asked Questions</h2>
<br>
<h2>Home</h2>
Which can be seen here:
http://jsfiddle.net/848s2335/1/
However I've noticed the 3 background images do not appear to stay in line when the page is zoomed in and out. Please could anyone point me in the right direction to keep all three images in line at all times?
Thanks for your help.
Instead use background image, use border-bottom, this will set the line at the bottom of h2, next set your bottom property of after and before to match with the same position of the border.
Remove this line on your h2:
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
Instead add this line:
border-bottom: 7px solid #000;
In your :before and :after css, change your bottom property to macth with border line:
bottom:-9px;
Fiddle
You could give the h2 element set height. I added height of 27px and it worked for me in your Fiddle:
h2 {
clear: both;
position: relative;
color: #000;
margin-left: 83px;
background: url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size: 1.5em;
float: left;
padding: 0px 0px 10px 0px;
height: 27px;
}
I've managed to make the left end stay always in line by:
setting all elements' height to the same value (I used 62px)
setting background-repeat: no-repeat and background-position: center on both ends
adjusting other values (padding etc)
fiddle: http://jsfiddle.net/ecpv2kv0/
The right end is sill like 0.5px out of line, but probably editing png images to have even height value (right now it's 31px) might help here.
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
I've a simple html ul/li/a vertical menu as this : http://jsfiddle.net/byXED/3/
<div id="front_page_a">
<ul id='nav'>
<li>TEXT</li>
<li class="scostati">TEXT</li>
<li ><span>TEXT</span></li>
<li class="scostati"><span>TEXT</span></li>
<li><span>TEXT</span></li>
</ul>
</div>
The problem is the css i put for the a tag, cause I don't get the right way to have the same space on top and bottom of the text in the anchor tag
#pageNavigation {
background-image: url('../Images/TIBC_Base/nav-bg.png');
background-repeat: repeat-y;
margin:5px 0;
padding:5px 15px 5px;
min-height:125px;
}
#pageNavigation .navContent {
display: table;
width:240px;
list-style-type: none;
margin:0; padding:0;
}
#pageNavigation .navContent li {
display: table-row;
height:57px;
text-align:center;
}
#pageNavigation a {
display: table-cell;
vertical-align: middle;
height:57px;
border-top:0px #E1E1E1 solid;
border-bottom:1px #E1E1E1 solid;
font-size:16px;
text-decoration:none;
color:#485963;
text-shadow: 0px -1px #EEEEEE;
}
Please, my question is : why the text of the link ("TEXT") has a space at the bottom ? what I have to do to have the text vertically centered in the anchor space?
I've tried various way, but none functioned. In the posted example I've put a padding:0px 7px; for the anchor tag but it doesn't work vertically.
The code posted has the problem with Firefox , it works fine with Safari.
In the CSS a { you have a border around the anchor tag and a padding. If you make this values to 0 (zero) your "extra space" disapears.
a {
line-height:100%;
display:table-cell;
text-decoration: none;
background-color:red;
border: 0px solid; /*changed to zero, removes border*/
font-size: 35px;
padding: 0px 0px; /*changed to zero, removes horiz space before&after text*/
color:white;
vertical-align: middle;
}
You should know that apparently Gecko and WebKit have different interpretations on how line-heights work. This fiddle illustrates the problem: http://jsfiddle.net/w88Ss/. According to the definition, it seems that Firefox is doing the right thing; anyhow, there is this difference.
If you think, for any reason, that you should use this approach, you can try a higher line-height, like line-height:40px, specifically for firefox, maybe using a JS code.
One solution, let's say a light workaround, is to use only some font and not some other.
In other words, I've noted that if in the css of the a tag I specify a font like Arial the vertical alignment is perfect with Firefox & Safari. If I use some other fonts like serif, Helvetica the problem is still there.
I have a page with an image on the left side, and text on the right. When the browser window is resized, or a smaller resolution is used, the text goes behind the image. I want the text to always be beside of the image, and not go behind it.
Any suggestions? http://jsfiddle.net/TYpCq/ (The layout on jsfiddle is a bit off. Nevermind this, I just need to know how to prevent the text going behind the image)
HTML:
<div id="indishopmain">
<p><strong>Test shop image</strong> by <strong>no one</strong></p>
<div id ="canvasshopwrap">
<div id="canvasshophead">
<p>Blabla</p>
</div>
<div id="canvasshoptext"</p>
<p>The high-quality print on a <span style="color:#01A07E;font-family:Cusmyrb;">stretched canvas</span> lets the artwork just pop of the wall, it’s almost magical. It’s easy to hang up and will keep it’s color brillance as well as the shape for a long time. We are sure, you will love it forever. Note: the size 20 x 20cm comes with a complementary easel.</p>
</div>
</div>
<div id="indishopimg">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="500px" />
</div>
</div>
CSS:
#indishopmain {
width:100%;
padding:0em;
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
margin-top:-11.9em;
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#canvasshophead {
display:inline-block;
width:11em;
background-color:#5020B8;
height:2em;
border-radius:3px;
-moz-border-radius:3px;
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:30px;
text-align:center;
line-height:2;
margin-top:0;
}
#canvasshopwrap {
margin-left:60%;
width:11em;
display:inline-block;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
}
#canvasshoptext {
width:11em;
}
Without knowing what it is you're trying to accomplish (things in your code make me wonder if they are by design or not) I will assume you're trying to have a static element centered in the middle of the page. If you're going for a fluid layout (something that will automatically degrade into mobile devices for instance) the solution will look different.
jsfiddle here: http://jsfiddle.net/RbA92/
I find that adding temporary background colors to elements can be very helpful when debugging. For the purpose of this exercise I've left them in there for you so you can easily see what's going on. I would also suggest putting these colors on your original fiddle (and change margin to padding to REALLY see what's going on). You had a few things in there that weren't behaving as you intended... I think :)
Here's a little breakdown of the styles for you. I commented out the styles I "removed" and annotated the things I added and why.
body { text-align: center; } /* centers all content */
#indishopmain {
padding:0em;
/*width: 100%;*/
background-color: blue;
overflow: hidden; /* allows us to float elements inside a non-floated element */
width: 700px; /* gives the browser a literal size to render, which keeps the elements from moving when the window is resized */
text-align: left; /* keeps child elements from inheriting the text-aling: center we put on the body */
margin: 0 auto; /* this is what actually centers our item. use this with body {text-align: center;} */
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
/*margin-top:-11.9em;
margin-left:10%;*/
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
float: left; /* float this bad boy all the way to the left */
}
#canvasshopwrap {
/*margin-left:60%;*/
width:11em; /* having this in em could break your layout. consider putting this in px to keep it from getting too big for it's area and being pushed to the bottom */
/*display:inline-block;*/
background-color: red;
float: right; /* float this one all the way to the right */
}
#canvasshophead {
/*display:inline-block;*/
width:11em;
background-color:#5020B8;
/*height:2em;*/
border-radius:3px;
-moz-border-radius:3px;
padding: 0 0 .5em 0; /* it's better to size the CONTENT how you want, so this box will always contain it. size thie box but leave the contents dynamic and you could end up with the content outside of your container */
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:2em;
text-align:center;
line-height:2;
margin:0; /* remove any browser-specific formatting */
padding: 0; /* ditto */
}
#canvasshoptext {
width:11em;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
padding: 0; /* remove any browser-specific formatting */
margin: 0; /* ditto */
}
Hopefully this is the answer you are looking for.
Remove this margin-top:
#indishopimg img {
margin-top:-11.9em; <--- here
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
If you want the image beside the text, move the image into the paragraph containing the text and add float:left to the CSS above.
I'm at a total loss on why I can't align the Search box to the left
The Search and RSS feed align on the test page:
http://scottjaxon.com/devsite/testnivo48.html
As it is on the home page (with a pic instead of nivo slider)
http://scottjaxon.com/devsite/index.html
I don't get it. I gotta be missing the smallest thing!
#wrapper #user1 #feahome #searchhome {
float: right;
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Or is it something with the NivoSlider CSS?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
Your index.html and testnivo48.html have different dom structures.
In index.html, the feahome div tag is the parent of rsshome and searchhome div tags; but in the testnivo48.html, they are all on the same level.
That's why the following css rule (in http://scottjaxon.com/devsite/css/style.css) gets applied on index.html, but ignored in testnivo48.html
#wrapper #user1 #feahome #searchhome {
...
}
After you fix the html, your problem might get solved.
I was looking at the CSS for both and the only thing I saw that was different in your
CSS compared to the CSS for http://scottjaxon.com/devsite/index.html is this:
#wrapper #user1 #feahome #searchhome {
float: LEFT; // the working version has it floated left as well
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Give it a shot and see if that works.
It may be a prioritizing problem. Using div#searchhome will give it a higher priority.