I just started using jsFiddle to make this (https://jsfiddle.net/travism2006/tp2y5pvu/1/)
body .main .leftAd {
border: 4px red dashed;
width: 160px;
}
Skip Links
<div class="header">
<ul>
<li><a>Coding</a>
</li>
<li><a>Web Tech</a>
</li>
<li><a>Data Fun</a>
</li>
<li><a>Robotics</a>
</li>
</ul>
</div>
<div class="leftAd">sss</div>
Can someone explain why the 'sss' disappears + the border not showing?
I played around with the fiddle and found that my ad-blocker was adding 'display: none;' to the elements with the "Ad" substring in them.
Renaming the elements from 'leftAd' and 'rightAd' to 'left' and 'right' made them display as you'd expect.
HTML:
Skip Links
<header>
<ul>
...
</ul>
<\header>
<div class="left-ad"><p>sss</p></div>
OR
<aside class="left-ad">sss</aside>
I would suggest you go back through your code because there are a lot of semantic issues that need to be addressed if you're trying to understand it better. What Vincent said may work, but it is not the best solution. Also the new semantic elements that are added to HTML5 cut down some of the code and make your code more understandable. It beats having to make divs and text elements over and over. Instead of using div elements you should use the header and aside semantic elements which can be used for headers and advertisements respectively. You can float each with simple CSS like you have done. Lastly, you shouldn't name the class attributes left and right by themselves. That is very general and it makes your code harder for others to discern. I used .left-ad and .right-ad and it worked just fine. If you have any additional questions I'm here to help. It's essential that you understand these concepts to make your code easier to read, debug if need be later on, and makes you really understand the semantics behind what your writing.
when I opened your fiddle, the HTML lacked a lot of content. Specifically, the sss that appears here but not in your js fiddle. When a div has no content in your case it collapses in on itself and that's why you see a flat red line because the top and bottom borders are lying on top of each other. In order to make additional space for the added sss container just add custom padding values etc.
<div class="main"></div>
Related
this is my first question here on stackoverflow. Forgive me in advance if I am not formatting or asking this accordingly.
So, I've seen people building navbars in many ways, specially with flexbox, therefore, I know this topic was mentioned before many times, but, could someone clarify me if:
Does the brand/logo on my site have to be inside an <h1> tag of any other heading tags for SEO purposes?
Is it right to leave the brand/logo outside of the <nav> tag?
For example (code below), I would set the <div> with the class= container as the flex container, but then everything in the rest of the site with that same class would get the display: flex;too. Would you recommend creating a separate container class to contain the just navbar? I am applying display: flex; on the container and <ul> as well so all gets on the same line.
Thank you so much for taking the time and reading this and once again, my apologies if this is an old topic. I am trying to organize my code better and understand the best practices.
<body>
<header>
<div class="container">
<a href="" class="brand">
Brand
</a>
<nav>
<ul>
<li>services</li>
<li>about</li>
<li>location</li>
</ul>
</nav>
</div>
</header>
</body>
As far as the SEO, there's multiple ways you can get a better rating. H1 is probably the best, but you can use any of the header tags, and emphasis things like bold, italics, and such.
There's also meta tags that go in the area, such as
<meta name="keywords" content="your keywords here">
Using the keywords throughout your page too is a big help too. One of the ways people get big hits on their pages is by adding the name to the link. Like for articles you see online they'll be /name_of_the_article.html this helps a good deal in the search engines.
For the brand/logo, it is a good idea to leave it outside of the nav tag. You may want to put it in its own div or wrap them both up in a div tree so you can position it easier. But if you want the brand/logo to be with the nav bar then you can have it there also.
For the container part, without seeing the css, I would say if they are going to have the same styling, then by all means keep them together. But unless it's all really simple stuff, it's better to give them their own classes as styling for 1 thing, might not fit with another.
If you could make a jsfiddle or codepen it would be much easier to get a picture of what you want specifically regarding the class css.
I'm new here and to HTML/CSS, so forgive me if I'm being incredibly dopey with this issue. I have searched for an answer to no avail and I finally admit defeat and ask...
I have two div boxes side by side in a container using float. No problmes there (i hope). I wish to split the right hand div box again. I thought it wouldn't be an issue, turns out I was wrong. I just cannot get the Include list (.includebox) to sit next to it's partner the Exclude list (.excludebox) inside .helpbox2
I've cut and pasted what I think is the pertinent code but I can always add more. The problem is live at www.exceptionalcvs.co.uk/help_cv_basics.html unless i've mucked around with it again - which I shall try my hardest to refrain from.
HTML
<body>
<div class="container">
<div class="margins">
<div class="helpbox1">
<h2>1. Introduction</h2>
</p><p>
<p>text here</p>
</div>
<div class="helpbox2">
<h2>2. What do I put in my CV?</h2>
<p></p>
<div class="includebox">Include list
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="excludebox">Exclude list
<ul>
<li>Passport number</li>
<li>Driving license number</li>
<li>Social Security number</li>
<li></li>
<li>Martial status</li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
.container{width:960px;margin:0 auto}
.margins{margin-left:16px;margin-right:16px}
.helpbox2{position:relative;top:0;left:0;width:396px;float:right;padding-right:12px;padding-left:12px;padding-bottom:10px;border-bottom:1px solid #999;border-left:2px solid #999;border-top:2px solid #999;border-right:1px solid #999;background:#efe7ca;margin-left:5px}
.incudebox{position:relative;left:0px;right:0px;width:100px;float:left;margin:0px auto;}
.excludebox{position:relative;left:0px;right:0px;vertical-align:top;width:100px;float:right;margin:0px}
Apologies if the code is a bit messy.
image of issue is here:
http://www.exceptionalcvs.co.uk/img/div_problem.jpg
You missed the l on .includebox
Edit 2
Here's the same code simplified, in a way that I'd do.
Remove the .margins div, unnecessary
Refactor your CSS so that you make style all divs in your second box the same, and make the only difference that one floats right
Spread CSS rules onto separate lines, only make a rule one line if it has a single attribute
Remove the position:relative and the top and right's - again, unncessary
I hope that helps :)
Edit
You also don't need anywhere near as much styling as you've got, these can all go as they're doing nothing (unless you have them for a reason I can't see in your example)
position:relative;left:0px;right:0px;;margin:0px auto;
Also
Try to space out each CSS rule onto a new line, it makes it a lot easier to read
When you use Stack Overflow, people really frequently use JSFiddle to demonstrate their issues. I used your code to help me, see here
Try separating your elements with dashes, but always in lowercase, e.g. .inside-box
Welcome to Stack Overflow :)
Your code is fine, but you missed the 'L' on .includebox in your css file.
Here is the working example: http://jsfiddle.net/SVEh9/
I'm working with vertically aligned items in a list that needs to work in IE7. I've been referencing code on this page which seems to work well cross browser.
I am experiencing an issue in IE7 where the first list item is not expanding to fit the width of the elements inside it. Below is a link to my code.
http://jsfiddle.net/grimmus/jUFMJ/
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<a href="#">
To Verify
</a>
</div>
</div>
</div>
<div class="outerNumber">
<div class="innerNumber">
<div class="element">
<a href="#">
3903
</a>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Authorize</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">View Payments</</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">To Submit/Modify</div>
</div>
</div>
</li>
</ul>
The items in the list will be dynamic so it's not really possible to assign a specific width to each LI.
Is anyone aware of a way i can make the list item expand to fit the child elements without a specific width ?
Well, you've got a whole stack of IE7-specific hacks in there (ie the * hacks), but to be honest, some of them are making things worse rather than better.
IE7 does have some CSS issues, and sometimes CSS hacks are justified, but I don't think what you're doing here is really helping.
I was able to get things working much better simply by disabling several of the bits of hacked CSS code.
For example, .items li .outerContainer .innerContainer .element a specifies position:absolute, but only for IE7. This completely changes how the element is positioned, and of course it goes wrong.
And .items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element specifies top:-50%. This is what is pushing most of your content out of the top of their boxes. If I disable that, the content appears back in view. Not quite in the right place, but visible and usable.
So the first thing I would suggest that you do is remove all of your current IE7-hacks. They are breaking things, not making them better.
Removing those hacks will make your menu usable in IE7. It won't look perfect, but it will be usable. And personally I'd leave it at that. You say you need the site to work in IE7; it will work. It may not look quite as pretty as other browsers, but it will work.
If you really do need to get it pixel perfect in IE7, then yes, you may need a few IE7 hacks. Different ones to the ones you've already tried already though! You need to be a bit more subtle with them. Maybe just adjusting the padding-top on .element or something like that to move the text down to a more central position.
Hope that helps.
[EDITS] Further thoughts on how to resolve the problem...
You mention that padding-top is tricky because some elements go over two lines. This will indeed make it difficult to accurately pad all the elements using a single style. If you know in advance which ones will be longer, you could give them a different padding to the others, but I realise that this might be problematic.
Another angle you could take is Javascript. A small bit of javascript specifically to solve this problem just for IE7 would be fairly simple to achieve, and wouldn't need to have any effect on other browsers.
You could also consider using a JS polyfill library like ie9.js or Selectivizr, which try to fix some of the CSS issues and missing features in older versions of IE.
I've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.
If you have several divs on a page, you can use CSS to size, float them and move them round a little... but I can't see a way to get past the fact that the first div will show near the top of the page and the last div will be near the bottom! I cannot completely override the order of the elements as they come from the source HTML, can you?
I must be missing something because people say "we can change the look of the whole website by just editing one CSS file.", but that would depend on you still wanting the divs in the same order!
(P.S. I am sure no one uses position:absolute on every element on a page.)
CSS can take elements out of the normal flow and position them anywhere, in any manner you want. But it cannot create a new flow.
By this I mean that you can position the last item from the html document at the beginning/top of the page/window, and you can position the first item from the html document at the end/bottom of the page/window. But when you do this you can't position these items relative to each other; you have to know for yourself how far down the end of the page will be for the first item from the html document to be positioned correctly. If that content is dynamic (ie: from a database or CMS), this can be far from trivial.
With Floating, and with position absolute, you can pull some pretty good positioning magic to change some of the order of the page.
For instance, with StackOverflow, if the markup was setup right, the title, and main body content could be the first 2 things in the markup, and then the navigation/search, and finally the right hand sidebar. This would be done by having a content container with a top margin big enough to hold the navigation and a right margin big enough to hold the sidebars. Then both could be absolutely positioned in place. The markup might look like:
h1 {
position: absolute;
top: 0;
left: 0;
}
#content {
margin-top: 100px;
margin-right: 250px;
}
#nav {
position: absolute;
top: 0;
left: 300px;
}
#side {
position: absolute;
right: 0;
top: 100px;
}
<h1> Stack Overflow </h1>
<div id="content">
<h2> Can Css truly blah blah? </h2>
...
</div>
<div id="nav">
<ul class="main">
<li>quiestions</li> ... </ul>
....
</div>
<div id="side">
<div class="box">
<h3> Sponsored By </h3>
<h4> New Zelands fish market </h4>
....
</div>
</div>
The important thing here is that the markup has to be done with this kind of positioning magic in mind.
Changing things so that the navbar is on the left and the sidebar below the nav be too hard.
You may want to look at CSS Zen Garden for excellent examples of how to do what you want. Plenty of sample layouts via the links on the right to see the various way to move everything using strictly CSS.
There are a couple of ways of doing it today. The first one works on more browsers but is more limited:
Using the CSS display values of table-caption, table-row and table-cell allow vertical ordering of at most three elements controlled exclusively with CSS.
This is much more recent and will only work in all latest browsers (yes, it will fail in IE9): Use of the flexbox CSS properties.
You can view live examples and read more about these techniques at the "this is responsive" patterns page. The two I'm talking about are in the section titled "Source-Order Shift"
You don't need position:absolute on every element to do what you want.
You just use it on a few key items and then you can position them where-ever you want, moving all the items contained within them along with the root element of the section.
I think that the most important factor is to place your html elements in a way that makes sense semantically, and with luck your layout in CSS will not have to do too much work. For example, your site's header will probably be the first element on the page, followed by common navigation, then sub-navigation, content and the footer (incomplete list).
Probably around 90-95% of the layouts you'll want to work with should be relatively trivial to manipulate that markup into something like what you're after. the other 5-10% will still be possible, with a little more effort, but the question you need to ask yourself is "How often am I likely to want my site header positioned in the bottom-right corner of the page?"
I've always found that the layout of a site is not too tough to manipulate after the fact if you do want to dramatically change the look and feel, at least in comparison with a ground-up recode.
</2c>
You can position individual boxes completely independent from the source order using position:absolute. So you can move the header to the bottom of the page, and the footer to the top using CSS.
Note however that this is genereally bad for accessibility: You should have the order of the content in the source more or less in the same order that you would present it for the reader. The reason is that a screen reader or similar device will present the content in the order it is defined in the source rather than the visual order defined by your CSS.
Good point about the header always being first and the footer last! But I might want to move my advertising DIV from along the top, to down the right.
The other thing I've heard about is putting the content DIV first, so Google pays you more attention (relevant keywords near the top of the page score higher)...or is that a myth? Doing that would require the sort of CSS trick I'm enquiring about too.