Ok, I want to display some text next to my pricetables. This text has a background that must be repeated across the entire page, thus outside the container. Atm, the text is behind it's background (thus not visible), and the background gets cutted at the edge of the container.
How can I edit this code so that I can see my text, and that the background overflows the edge of the container?
This is how it looks like right now:
preview http://piclair.com/data/1t2ri.jpg
My CSS:
.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:213px;
background: url('/images/pakkettenbg.png') repeat-x;
position:relative;
z-index: 0;
overflow: visible;
}
#onside {position: relative; z-index: 1; margin-top: 124px; color: #8C8C8B;}
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; min-width: 782px; overflow: visible;}
#orderbuttons {position: relative; z-index: 1; float: left; margin-left: 158px;}
And my HTML:
<div class="overflow">
<div id="onside">
<p>Unieke logo ontwerpen:</p>
<p>Levertijd:</p>
<p>Revisies:</p>
<p>Briefpapier ontwerpen:</p>
<p>Enveloppe ontwerpen:</p>
<p>Visitekaartje ontwerpen:</p>
<p>Bestandsformaten:</p>
</div>
</div>
<div id="logopakketten">
<img src="/images/logopakketten/Prijskolom%20S.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20M.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20L.png" alt="" />
<img src="/images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
<div id="orderbuttons">
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernow.png" alt="" />
<img src="/images/logopakketten/ordernowlastcolumn.png" alt="" />
</div>
Why are you using positioning? That's a rhetorical question, you're not supposed to (use positioning). It's the jQuery of CSS, everyone uses it and it's the worst thing you can use.
If the child elements are floating than the parent needs to have overflow: auto; set. Also do not start relative URLs with a slash. You should get used to using the base element...
http://www.jabcreations.com/blog/streamlining-local-and-live-development-with-the-base-element
The main element with the repeating grey background-image should contain those vertical banners. You want text to the left of those banners? Then put text to the left of those banners.
You did not post enough to warrant a full working demo (reply with more info and I might be able to refine this for you) though this will get you moving and grooving in the right direction. Make sure you adjust the base element accordingly (it will be different for your local/live environments, use a scripting language like PHP to determine your domain (e.g. localhost or example.com) and then serve the correct value for the base element).
<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml');
}
else {header('Content-Type: text/html');}
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<base href="http://localhost/version-3.0/" />
<style type="text/css">
.overflow {overflow: auto;}
.left {float: left;}
.width_10 {width: 10%;}
.width_20 {width: 20%;}
.width_30 {width: 30%;}
</style>
</head>
<body>
<div class="overflow">
<div class="left">
<p>text here</p>
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20S.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20M.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20L.png" alt="" />
</div>
<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>
</div>
</body>
</html>
Save this as an .xhtml extension if you're not using scripting (e.g. PHP) (XHTML will not work in IE8 or lower but it's at 5% market share right now, at this stage of your understanding concentrate on competent browsers) and XHTML is great because it's strict the moment you encounter an error you'll know you need to fix it, unless you want to blow three days trying to figure out you're missing a quote on an attribute. Strict code means you'll get in to the groove of doing it right the first time once you're used to it and it'll save you immense amounts of time.
You could also probably stand to learn how to correctly utilize CSS level 1, not a joke, most people don't correctly use the float property and end up spamming tons of position properties all over the place turning a page in to suck.
http://www.jabcreations.com/web/css/nested-divisible-elements
Yeah, you'll eventually utilize position for certain main-level elements for sites with advanced layouts (hint: 99% of sites do NOT have advanced layouts) but without a good foundation everything laying on top of that will be even less sturdy to relay on.
Related
Top and right styles of "#help" are not computed in any browser on declaring doctype as
Html code is:
<div id="events">
<img src="media/Event icon.png" alt="events" id="events_img">
</div>
<div id="colors" >
<img src="media/CULTURAL.png" alt="Colours" id="Colors_img">
</div>
<div id="hospitality">
<img src="media/117016-matte-blue-and-white-square-icon-business-notepad.png" alt="hospitality" id="hospitality_img">
</div>
<div id="help">
<img id="help_img" src="media/Help.png" alt="help">
</div>
<img src="media/cadbell.fw.png" alt="cadbell" id="cadbell">
<img src="media/cadbell2.fw.png" alt="cadbell" id="cadbell2">
<img src="media/Bird-blue-icon.png" alt="angry bird" id="angry_bird">
<div id='bottom-div'></div>
<img src="media/stick.fw.png" alt="stick" id="stick">
<span id="dev"><b>Developed by:  </b><a href='#'>D Akhil Reddy</a></span>
</div>
</div>
I have given only css style for #help and its sub element #help_img , top and right are not working,
css styles of #help:
#help{
position: absolute;
right: 320;
top: 390;
cursor: pointer;
width: 137px;
}
#help_img{
position:absolute;
left:10px;
}
In Quirks Mode, CSS declarations like right: 320 are interpreted so that the px unit is implied. This violates CSS specifications, which require that such declarations be ignored.
If you put <!doctype html> or any other doctype string that triggers Standards Mode, things may change quite a lot if the CSS code has errors.
The solution is to fix the CSS code. In this case, it should suffice to replace 320 and 390 by 320px and 390px. Use the W3C CSS Validator to check your CSS code.
I am trying the Blueprint CSS framework, and am having a hard time figuring out how to do the overall layout.
It seems Blueprint (as far as I have understood it so far) makes you use a set page width at 950px. I guess you could change that with some modification, but in any case there has to be some width, so that's fine. The problem is, even if I want the main content of the page to be 950px wide, I want 100% wide headers and footers.
So I have placed a header and a footer outside the main "container" div that's 950px wide. I set the header div to 100%. And then I have a "headerContent" div inside it (containing menu, logo, etc), which has a 950px width (span-24 in Blueprint terms). But I want the headerContent div to be centered within the header div.
I have always used the "margin: 0 auto" trick to do this, but for some reason it doesn't work at all now.
Here's the html:
<div id="header" class="blueheader">
<div id="headerContent" class="span-24">
<div id="logo" class="span-6">
<a href="/">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14"><ul id="menu"><li>
<a href='/Services/Index'>TJÄNSTER</a></li>
<li>
<a href='/About/References'>KUNDER</a></li>
<li>
<a href='/About'>OM OSS</a></li>
<li>
<a href='/About/Contact'>KONTAKT</a></li>
</ul></div>
<div id="logindisplay" class="span-2">
Logga in
</div>
</div>
</div>
And here's the css for header and headercontent:
#headerContent
{
overflow: auto;
zoom: 1;
margin: 0 auto;
}
#header
{
width: 100%;
position: relative;
margin-bottom: 0px;
color: #000;
margin-bottom: 0px;
overflow: auto;
zoom: 1;
}
The overflow and zoom part is just another trick I read about to avoid having to use empty divs to clear containing divs, and I tried without them with no luck, so they have nothing to do with the problem.
Any ideas what I'm doing wrong?
You need to set a width the the #headerContent because without it defaults to width:100% if you place a 950px width to the div, you should be fine.
Found the answer: you shouldn't use span-24 on the headerContent apparently in the Blueprint framework, but rather the container class. Here's what worked:
<div id="header" class="blueheader">
<div id="headerContent" class="container">
<div id="logo" class="span-6">
<a href="#Url.Action("Index", "Home")">
<img src="/images/expertinfo.png" width="230" height="62" />
</a>
</div>
<div id="menucontainer" class="span-14">#Html.Raw(Html.Menu())</div>
<div id="logindisplay" class="span-2">
#Html.Partial("_LogOnPartial")
</div>
</div>
</div>
I cannot say I understand exactly why it didn't work before, and that worries me, because I am trying this framework to simplify layout, but this made it harder to understand. As far as I could see it should have worked with the first code too...
I have a block of html that I want to act as a clickable link. In the block of code below, I would like to make the whole div into a link.
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
HTML5 permits surrounding the html in an anchor tag (I think). See below
<a href="goThere.html">
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
</a>
However, this seems wrong to me. How will software such as screen readers describe the link.
I also considered the following CSS trick. I altered the HTML to be
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
and then used CSS to style the link to cover the whole of the div. See below:
#clickableLink {
position: relative;
width: 100px;
height: 200px;
z-index: 0;
}
h3 {
z-index: 0;
}
img {
z-index: 0;
}
a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
z-index: 1;
}
This works perfectly in all browsers apart from IE. Does anyone else have any suggestions?
Your first approach is actually the best. To describe your link, you should use the a element's attributes such as title, alt and possibly any WAI-ARIA markup you wanted to employ. This is good industry practice anyway and allows you to wrap content in an a tag without worrying about accessibility.
The thing that will allow older browsers to render it properly (and to make sure it validates) is to use inherently inline elements inside an inline element. In other words, block level elements can not be placed inside inline ones (according to the HTML, not the values that CSS may give the element). You can then use CSS to make a span act like it is block level. So the markup could easily be:
<a href="goThere.html">
<span id="clickableLink">
<span class="headerthree">Link Heading</span>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</span>
</a>
If you declare that the A is block level, then you wouldn't even need the span. Problem here is that you lose the SEO of using Header elements. So...
The best thing is probably to leave it specced for HTML5 as you have it above, even though it seems wrong. To help SEO and screen readers, use a title tag to "describe" the anchor. The code will validate just fine. Then, make sure your A is display: block, and I think older browsers will render it ok, too.
I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyPlan</title>
<meta name="X-UA-COMPATIBLE" value="IE=8" />
<style type="text/css">
#outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;}
#innerstatic1 { width:100%; background-color:yellow; height:100px;}
#innerstatic2 { overflow:auto; background-color:red; width:100%;}
</style>
</head>
<body>
<div id="outerfixed">
<h3>OUTERFIXED</h3>
<div id="innerstatic1">
<h3>INNERSTATIC1</h3>
</div>
<div id="innerstatic2">
<h3>INNERSTATIC2</h3>
line<br />
...lots of lines
line<br />
</div>
</div>
</body>
</html>
Is there any way for me to do this? Again, I want #innerstatic2 to be properly contained within #outerfixed and get scrollbars if it gets bigger than the space it has inside #outerfixed.
I know there are some possibilites to hack around this by also fixing #innerstatic2, but I would really like it to be within the flow inside #outerfixed if possible, so that if I move #outerfixed somewhere, the inner element would come with it.
EDIT: I know I can set overflow:auto on the #outerfixed and get a scrollbar on the whole thing, but I specifically want a scrollbar just on #innerstatic2, it is a grid and I want to scroll just the grid.
Anyone? Possible?
There's a two-step solution for this, but it comes at something of a cost:
Add overflow-y: scroll; to the css for #innerstatic2.
define a height (or max-height) for #innerstatic2, otherwise it won't overflow, it'll just keep increasing its height (the default for a div is height: auto).
Edited because I just can't stop myself, sometimes.
I've posted a demo on jsbin to show a jQuery implementation of this, which will calculate a height for you (it's not generalised, so it'll only work with your current html).
(function($) {
$.fn.innerstaticHeight = function() {
var heightOfOuterfixed = $('#outerfixed').height(),
offset = $('#innerstatic2').offset(),
topOfInnerstatic2 = offset.top,
potentialHeight = heightOfOuterfixed - topOfInnerstatic2;
$('#innerstatic2').css('height',potentialHeight);
}
})(jQuery);
$(document).ready(
function() {
$('#innerstatic2').innerstaticHeight();
}
);
I solved it by giving absolute position to the ul and height 100%
ul {
overflow-y: scroll;
position: absolute;
height: 100%;
}
check out this FIDDLE
overflow-y:scroll;
And add this for iOS devices. It does give a better scroll using touch. The overflow-y needs to be scroll! for secure reasons. auto wont work for some people. or at least thats what i heard.
-webkit-overflow-scrolling: touch;
you should set height for outerfixed and max-height for innerstatic2
see this might be helpful DEMO
It is the container div who has to be with the overflow:auto attribute. In this case, the #outerfixed div
The only way I figure, is to set innerstatic2 to absolute position (so you can use top and bottom to size it in relation to outerfixed), then inside innerstatic2 create another div where you put your text in. Then you give innerstatic2 the "overflow: auto;" indication. The drawback of this method, that innerstatic2 does not move down, when innerstatic1 grows, since it has to be position absolutely. If it needs to move, it must be "position: relative", but then you need to set a fixed height for it. So either way you have to settle for a compromise.
Once all browsers support the newer CSS3 features, like the calculation support, there will be better options to do this, without these drawbacks.
Not ideal, but this should get you 90% of they way
<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
<div style ="width:15em; background-color: green;">
Title
</div>
<div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
<div style="height:100em; background-color:red; width:10em;">
scroll<br/>
scroll<br/>
scroll<br/>
</div>
</div>
</div>
So I couldn't do with the fixed position but I got the desired effect with the position as relative.
Try this
<div class="parent" style = "overflow: scroll; position: relative; width: content-box"">
<div class="scrollable-child" >
//Your content here
</div>
</div>
I used this in one of my vuejs projects
<template>
<v-flex class=" d-flex flex-column " style="overflow: scroll; position: relative; width: content-box">
//FIXED HEAD
<v-flex class="pt-10" style="position: fixed; background-color: black;width: 25.2em;z-index: 1;border-radius: 20px 20px 0 0">
<TextView class="mx-4" text="Thur 28, 2021" size="24" bold :color="colors.primaryText"/>
<TextView :text="`${order.totalOrder()} Items`" size="24" bold :color="colors.primaryText" class="my-2 mx-4"/>
<v-divider dark style="height: 5px" class="max-4" />
</v-flex>
//SCROLABLE LIST ITEMS
<v-flex class=" mx-4 d-flex flex-column justify-end " style="margin-top: 100px;padding-bottom: 100px; padding-top: 50px">
<!-- <TextView :text="receipt" :color="colors.primaryText"/>-->
<ProductComponent type="cartItem" v-for="(product,index) in order.products" :key="`order_item_${index}`" :product="product" :invert-theme="true" #onAdd="addOneMore(index)" #onRemove="removeOne(index)" />
</v-flex>
//BOTTOM FIXED BTN
<v-flex class="d-flex flex-column justify-end mb-2 xs12 mx-4 " style="max-height: 100px; position: fixed; bottom: 30px; width: 23em" >
<v-btn block ref="renderBtn" #click="renderReceipt()" depressed min-height="60" style="border-radius: 20px">
<TextView text="Order" bold/>
</v-btn>
</v-flex>
</v-flex>
</template>
Which method is best?
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<h1>slogan of company</h1>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<p>slogan of company</p>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<span>slogan of company</span>
</div>
<div id="header">
<div id="logo">
<img width="172" height="80" src="logo.jpg" alt="Clevex logo">
slogan of company
</div>
</div>
I would think a better approach would be to have the slogan as a span. The slogan is not truly the first header of your document. Think if it were a table of contents would you see the slogan as the first entry?
The slogan is probably subject to some design rules (e.g. the position relative to the logo). As the slogan probably makes little sense in a content / SEO way anyway, and it's more important it looks right, I would recommend putting the slogan into the image.
Looks good, apart from the fact that a slogan isn't really a heading, hence a <span> or something without semantic meaning should be used instead of <h1>
I guess not;
It's better to do it like this:
<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>
Since your logo is part of the layout and not a image in context (for example a product picture) you should put it in the h1 background.
Do your CSS like this:
h1 {
background-image: url(logo.png);
width: 200px;
height: 80px;
cursor: pointer;
}
h1 span {
display: none;
}
This way it is both readable for the and user and a search engine.
No, something like the following would be better:
<div id="header">
<h1>Company</h1>
<h2>Slogan</h2>
</div>
h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top; width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }
The h1 is only used once, for the company itself. Then you replace that logo text with an image using CSS. This way you keep the markup within your CSS.
In general, I think you'll see everyone's slogan as an image rather than text (with the text as the alt attribute). And href="#" means "go to the top of this page." It should probably be a link to the home page instead.
...As long as you use alt, search engines will index it properly. If this is the home page, that might justify having the name and slogan in h1 and h2 elements, but elsewhere it's probably not necessary. It's probably better to drive traffic based on the actual content of the page and not try to make every page the same in the eyes of search engine spiders. The company name is probably already in the url, which is plenty.