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.
Related
I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>
Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u
body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}
I'm having a trouble with the menu widget.
I want to have a menu item that has a custom layout as a content. Very similar to what is shown in this demo: http://demos.kendoui.com/web/menu/index.html
The "Stores" item has a custom layout, and when I click inside, the menu isn't closed, which is the behavior I want. But if I copy the code shown below to my own project, when I click inside, the menu is closed... I don't want this behavior.
Why this happen in my project and not in the demo example? How can I solve this? Maybe some javascript library in conflict?
In items that have regular items, the behavior is the same in both...
Code (copied from the demo page):
<div id="example" class="k-content">
<div id="megaStore">
<ul id="menu">
<li>
Products
<ul>
<li>
Furniture
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Tables & Chairs</li>
<li>Sofas</li>
<li>Occasional Furniture</li>
<li>Childerns Furniture</li>
<li>Beds</li>
</ul>
</li>
<li>
Decor
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Bed Linen</li>
<li>Throws</li>
<li>Curtains & Blinds</li>
<li>Rugs</li>
<li>Carpets</li>
</ul>
</li>
<li>
Storage
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Wall Shelving</li>
<li>Kids Storage</li>
<li>Baskets</li>
<li>Multimedia Storage</li>
<li>Floor Shelving</li>
<li>Toilet Roll Holders</li>
<li>Storage Jars</li>
<li>Drawers</li>
<li>Boxes</li>
</ul>
</li>
<li>
Lights
<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
<li>Ceiling</li>
<li>Table</li>
<li>Floor</li>
<li>Shades</li>
<li>Wall Lights</li>
<li>Spotlights</li>
<li>Push Light</li>
<li>String Lights</li>
</ul>
</li>
</ul>
</li>
<li>
Stores
<ul>
<li>
<div id="template" style="padding: 10px;">
<h2>Around the Globe</h2>
<ol>
<li>United States</li>
<li>Europe</li>
<li>Canada</li>
<li>Australia</li>
</ol>
<img src="../../content/web/menu/map.png" alt="Stores Around the Globe" />
<button class="k-button">See full list</button>
</div>
</li>
</ul>
</li>
<li>
Blog
</li>
<li>
Company
</li>
<li>
Events
</li>
<li disabled="disabled">
News
</li>
</ul>
</div>
<style scoped>
#megaStore {
width: 600px;
margin: 30px auto;
padding-top: 120px;
background: url('../../content/web/menu/header.jpg') no-repeat 0 0;
}
#menu h2 {
font-size: 1em;
text-transform: uppercase;
padding: 5px 10px;
}
#template img {
margin: 5px 20px 0 0;
float: left;
}
#template {
width: 380px;
}
#template ol {
float: left;
margin: 0 0 0 30px;
padding: 10px 10px 0 10px;
}
#template:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#template .k-button {
float: left;
clear: left;
margin: 5px 0 5px 12px;
}
</style>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
</div>
I found the problem.
I was using an old version of kendo (2013.1.514). When I updated to the latest (2013.2.716) the problem was gone.
I have a simple problem which i cannot figure out. Look at this html code:
<div id="container">
<div id="content">
<div id="menu">
<ul>
<li>pagina's</li>
<li>home</li>
<li>kamers</li>
<li>over ons</li>
</ul>
</div>
<div class="clearfloats"></div>
<div id="cmscontent">
<div id="sidebar">
<ul>
<li>overzicht van de pagina's</li>
<li class="last">pagina toevoegen</li>
</ul>
</div>
<div id="main">
<h1 class="maintitle">
overzicht van de pagina's
</h1>
<div id="maincontent">
sdfsd
</div>
</div>
<div class="clearfloats"></div>
</div>
</div>
</div>
CSS:
#container {
width: 84%;
margin: 0 auto;
}
#content {
margin-top: 50px;
min-width: 1140px;
}
#cmscontent {
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 44px 30px 44px 30px;
position: relative;
z-index: 3;
}
#sidebar{
padding: 14px 24px 14px 24px;
width: 306px;
background-color: #f8f8f8;
float: left;
}
#main {
float: left;
margin-left: 80px;
width: 100%;
}
The problem is that the last container: #main, standard is only as wide as the content it has. So i'm obliged to add a fixed width to it (px). The whole point of my design is that i have floating percentual divs so that's a bummer. Adding 100% width or any other number in %, also has problems of its own..
Is there anyone that a solution for me?
Thank you!
http://www.mathijsdelva.be/cms/
I haven't finetuned anything; i only just html'ed for Safari as of the moment.
The problem is that the last container: #main, standard is only as wide as the content it has.
Tried using display: block for #main ?
What are you actually trying to do here? Are you trying to make a flexible design?
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;}