IE7/IE8 Compatible rendering floated layout wrong - layout

I have a site with a right sidebar and a left main content area. Code looks like this:
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="leftside">leftsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
<div class="rightside">rightsidecontent</div>
with
.leftside
{
float:left;
width:710px;
}
.rightside
{
margin-left:720px;
}
(see actual site at http://blog.stephenkiers.com/)
Reason it is coded this way is so that because the leftsidecontent is important and I want to be first data accessed by visually impaired visitors; instead of them having to skip all the fluff every time!
The code works in FF, IE8, Safari etc; but in IE7 the rightside divs clear the floated divs.
I would love any suggestions you may have. I have some ideas about how to fix it; but they all involve pretty big rewrites.
thanks!

why don't you try wrapping the content stuff into two columns like this example
The CSS:
.leftside {
float:left;
width:710px;
}
.rightside {
float: left;
margin-left: 20px;
}
.contentBlock { margin-bottom: 10px; background: #ccc; padding: 8px; }
The HTML:
<div class="leftside">
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
<div class="contentBlock">
<p>main stuff goes here</p>
</div>
</div>
<div class="rightside">
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
<div class="contentBlock">
<p>secondary stuff goes here</p>
</div>
</div>
This way the leftside and rightside are just layout elements and are isolated from the content.
Another good tip for visually impaired visitors is to have links at the top of the page to allow users to skip directly to content sections and hide them from your layout with css:
.skipToLinks { position: absolute; top: -100px;}

Related

How to implement position responsive patterns in MDC-Web (material-components-web)?

Tell me please how to use the material-components-web to implement this pattern:
Link on Material.io
#PavelB answer's has a minor problem on smaller screens, namely smartphones. The main section overlaps the content of the navbar.
Each .mdc-toolbar__row has a height of 64px on tablets and smartphones, but on smartphones its height is 56px.
This can be solved using media queries, like this:
.demo-toolbar {
margin-bottom: -192px;
}
#media (max-width: 599px) {
.demo-toolbar {
margin-bottom: -168px;
}
}
EDIT: here's the edited pen.
Solved this problem as follows:
CSS
.demo-toolbar {
margin-bottom: -190px;
}
HTML
<header class="mdc-toolbar demo-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<div class="mdc-toolbar__row"> </div>
<div class="mdc-toolbar__row"> </div>
<div class="mdc-toolbar__row"> </div>
</header>
https://codepen.io/anon/pen/jmwgjQ

Onmouseover is not working in SharePoint 2013

Hi I am showing items from library to the main page using Content Query. TO scroll this items i am using Marquee now i want to stop when OnMouseOver and again start on out i use onmouseover="stop()" onmouseout="start()" and button to stop but its not working please is the code i have. Can anyone help how use or is there any option. Thank you.
<marquee id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
<style>
#WebPartWPQ2 a {
color:#000000 !important;
}
</style></div></marquee>
Looks like, if I understand you correctly, you would like to add a MouseOver and MouseOut effect to a marquee. If that is correct. all you needed to do is tell the browser that you wanted THIS marquee and it would have worked. your code right now does not say which marquee you want the JavaScript to work towards.
syntax = some-event="(What)*Target****.*(Which)action();"
this.stop(); or this.start
onMouseOver="this.stop();"
Hope this is what you were looking for. If not could you rephrase your
question. I had a hard time understanding you.
<style>
#WebPartWPQ2 a {
color: #000000 !important;
}
</style>
<marquee onmouseover="this.stop();" onmouseout="this.start();" id="test" bgcolor="rgba(235,235,235,0.8)" scrolldelay="10" direction="up" scrollamount="2" style="width: 435px; height: 252px;">
<div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false">
<div class="ms-rtestate-notify ms-rtestate-read 7678e8de-25e2-420f-a052-a9ae8bd6a173" id="div_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on">
</div>
<div id="vid_7678e8de-25e2-420f-a052-a9ae8bd6a173" unselectable="on" style="display: none;">
</div>
</div>
</div>
</marquee>

Adding Google Places search box on page

I have embedded a simple google map with the stores I needed located on them. I would like to add a search box just above the map in the center or in the map at the top as per the places search box. Really not sure on whats the best method of this as my html is very limited.
this is my map code
<section class="mbr-section mbr-section__container" style="background-color: rgb(255, 255, 255); padding-top: 80px; padding-bottom: 80px;">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="mbr-map"><iframe frameborder="0" style="border:0" src="https://www.google.com/maps/d/u/0/embed?mid=1Dt00Nkp6QbZ3DqYkrR7NCjTSQyo"></iframe></div>
</div>
</div>
</div>

Bootstrap layout - not centered and bad zooming

i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.

Bootstrap: fluid layout with no external margin

if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.

Resources