I need to make responsive layout, but my menu crashing like in the picture. I need to make menu in the right position, so in my css I added right:0px. How I should make menu with right position and working responsive.
This is how it looks with right position.
But when I delete right:0px; everything is working, BUT I need right position.
Example without right position
<div class="row" id="menu_section">
<div style=" margin-top:20px" class="four columns">
<img class="img" src="images/logo.png">
</div>
<div class="eight columns">
<div id="menuSection">
<div class="menu top">
<div class="item">Registrati</div>
<div class="item">Accedi</div>
<div class="item"><img src="images/shoppingCart.png"></div>
</div>
<div class="menu bottom">
<div class="item"><b>C</b>osa fare</div>
<div class="item"><b>O</b>rdina ora</div>
<div class="item"><b>A</b>ziende</div>
<div class="item"><b>F</b>ilosofia</div>
<div class="item"><b>C</b>ontatti</div>
</div>
</div>
</div>
</div>
#menuSection{
right: 0px;
bottom:0px;
position: absolute;
margin-bottom: 5px;
}
#menu_section{
padding-top: 10px;
padding-bottom: 10px;
}
.menu.top{
margin-left:auto;
text-align: right;
padding-bottom:20px;
}
.menu.bottom{
margin-top:auto;
text-align: right;
}
.img{
max-width:100%;
position: relative;
bottom: 0;
display:table;
display:block;
margin:auto;"
}
Related
I have four tabs developed with HTML5/CSS3/JS shown below.
I have used display:inline-block; for tab divs and text-align:center for their parent div to locate all four tabs at the center of the page.
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3:
.parent{text-align:center;}
.tabItem{display:inline-block;}
Now I want to locate two of the tabs i.e. YOU and HELP at the right-side of the page, and the rest of the tabs i.e. DATABASE and TASKS at the center of the page. I wonder how I can do that.
It's preferred to have div elements follow the natural flow of the page.
Do something like this
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right{float:right;}
.left{float:left;}
<div class='parent'>
<div class='tabItem left'>Content for Left</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem right'>YOU</div>
<div class='tabItem right'>HELP</div>
</div>
here is your solution!
.parent{text-align:center;}
.tabItem{display:inline-block;}
.right {
float: right;
}
<div class='parent center'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='parent right'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>HELP</div>
</div>
</div>
Hope this helps!!
<html>
<head>
<style>
.parent{text-align:center;}
.tabItem{display:inline-block;}
#right {float: right;}
</style>
</head>
<body>
<div class='parent'>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div id="right" class='tabItem'>YOU</div>
<div id="right" class='tabItem'>HELP</div>
</div>
</body>
</html>
Or just put those two divs in a parent container and give it an id="right" to avoid repeating id !!
I think you will need to set the tabs you need to relocate to absolute position, so they will be out of the normal content flow, then you can truly center the other two tabs.
.parent {
background: pink;
text-align: center;
position: relative;
}
.tabItem {
margin: 0 5px;
display: inline-block;
background: aqua;
}
.tabItem:nth-child(1) {
position: absolute;
right: 50px; /* width of "HELP" tab */
}
.tabItem:nth-child(4) {
position: absolute;
right: 0;
}
<div class='parent'>
<div class='tabItem'>YOU</div>
<div class='tabItem'>DATABASE</div>
<div class='tabItem'>TASKS</div>
<div class='tabItem'>HELP</div>
</div>
CSS3 feature display:flex is an option too. Can play around with it to see if it would work.
.parent{
display:flex;
justify-content:center;
}
.item{
padding: 10px;
text-transform:uppercase;
}
.right{
margin-left:auto;
}
.left{
margin-right:auto;
}
<div class="parent">
<div class="item left">you</div>
<div class="item">database</div>
<div class="item">tasks</div>
<div class="item right">help</div>
</div>
This works for bigger screen and shows the way I want but on Mobile, "Right Title" overlaps the "Left Title". Left title should go up but Right Title should be below it but instead, it goes on top of the Left Title.
What should I do?
<div class="IdeathonCover">
<img class="img-responsive" width="100%" src="bg-image.jpg">
<div class="IdeathonLeftTitle">
<h1>Left Title</h1>
</div>
<div class="IdeathonRightTitle">
<h1>Right Title</h1>
</div>
</div>
I tried this method too using the bootstrap 3 layout but it didn't work. The "col-x-12" is not being respected:
<div class="IdeathonCover">
<img class="img-responsive" width="100%" src="bgimage.jpg">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="IdeathonLeftTitle">
<h1>Left Title</h1>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="IdeathonRightTitle">
<h1>Right Title</h1>
</div>
</div>
</div>
</div>
The CSS used is below:
.IdeathonCover {
position: relative;
}
.IdeathonLeftTitle {
position:absolute;
bottom: 10%;
left: 0;
padding: 0px 50px 20px;
color: #fff;
font-weight: 300;
}
.IdeathonRightTitle {
position:absolute;
bottom: 10%;
right: 0;
padding: 0px 50px 20px;
color: #fff;
font-weight: 300;
}
Anyone knows why this is happening?!
If you are using Bootstrap, as far as I'm aware, there is nothing wrong with using Bootstrap classes within absolute positioned elements. You could try something along the lines of:
CSS:
.IdeathonCover {
position: relative;
}
.IdeathonTitles {
position: absolute;
bottom: 10%;
width: 100%;
}
And your html:
<div class="container-fluid">
<div class="row">
<div class="IdeathonCover">
<img class="img-responsive" src="bgimage.jpg" alt="">
<div class="IdeathonTitles">
<div class="col-md-6">
<h1 class="text-center">Left title</h1>
</div>
<div class="col-md-6">
<h1 class="text-center">Right title</h1>
</div>
</div>
</div>
</div>
</div>
try adding this in the end of your css file-
#media (min-width: 320px) and (max-width: 750px){
.IdeathonLeftTitle { right: 0; }
.IdeathonRightTitle { left: 0; top: 67px; }
}
it should help.
I'm having trouble making my work neater. I'm really trying to learn how to simplify my efforts. But I start first with putting everything on the screen and then div'n the elements out. After I've seen all my elements, I tackle the css.
.left {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: left;
height: 400px;
width: 33%;
}
.middle {
position: relative;
margin: 50px 3px 10px 3.5px;
float: left;
height: 400px;
width: 33%;
}
.right {
position: relative;
margin-top: 50px;
margin-bottom: 10px;
float: right;
height: 400px;
width: 33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter</p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="left" id="preview"></div>
<div class="middle" id="preview"></div>
<div class="right" id="preview"></div>
<div id="footer"></div>
Link to see it work on jsFiddle --
http://jsfiddle.net/a1ynzr7p/1/
<div id="header">
<p id="logo"> GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="evenThree" id="preview">LEFT
</div>
<div class="evenThree" id="preview">MIDDLE
</div>
<div class="evenThree" id="preview">RIGHT
</div>
<div id="footer">
</div>
CSS
.evenThree{float:left; width:33%;}
Another solution would be to use display:flex; on the parenting container of those three items.
http://jsfiddle.net/kqxyqL0f/3/
.contentWrapper {
display:flex;
}
.column {
width:33%;
}
<div id="header">
<p id="logo">GRAPEFRUIT</p>
<li>Home</li>
<li>Download</li>
<p id="fund">KickStarter
<p>
</div>
<div id="top">
<h1>Split Screen Messeging - Texting With Motion Images!</h1>
</div>
<div class="contentWrapper">
<div class="column" id="preview">TESTING LEFT</div>
<div class="column" id="preview">TESTING MID</div>
<div class="column" id="preview">TESTING RIGHT</div>
</div>
<div id="footer"></div>
Are you trying to create three columns (aligning div's horizontally)? You can simply wrap each column (left, middle and right) with a class that applies: float:left and width:33%.
As seen here: jsfiddle
.col-3 {
float:left;
width:33%;
}
<div class="row">
<div class="col-3">Left</div>
<div class="col-3">Middle</div>
<div class="col-3">Right</div>
</div>
Also some tips to help your code:
ID's are non re-usable, don't repeat them throughout the code. Either change them to a class or change the ID to be unique.
Make sure all the <li> elements are wrapped in a <ul> or <ol> tag
You can also do these two things. See the boxes 1 - 3, they're using DIV with CSS display: table-cell. Easier to get the contents inside centered in the box. The DIV containing Boxes 4, 5, and 6 are using display: inline-block - they're more flexible with using margins between them, but, you'll have to do something special to make the text go center (wrap it in <span>).
Or you can learn Twitter-Bootstrap (look it up). You'll be far better off with it when applying layouting for websites especially when your requirements are to make it mobile friendly.
.container {display: table;margin-bottom:30px}
.set {
display:table-cell;
width: 200px;
height: 200px;
text-align:center;
vertical-align:middle;
padding:10px;
background-color:#9a9a9a;
border:1px solid #444;
}
.set2 {
display:inline-block;
width:140px;
height:90px;
text-align:center;
background-color:#A75b5b;
margin: auto 10px;
border:1px solid #444;
}
<div class="container">
<div class="set">Box 1</div>
<div class="set">Box 2</div>
<div class="set">Box 3</div>
</div>
<div class="set2">Box 4</div>
<div class="set2">Box 5</div>
<div class="set2">Box 6</div>
I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).
The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.
Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?
HTML
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
CSS
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
position: relative;
}
.logo{
position:absolute;
left: 50%;
top: 20px;
margin-left: -100px;// half-width of logo
z-index: 20;
}
.box{
background-color: #333;
height: 120px;
margin-bottom: 10px;
}
If you know the height of the logo, you can use negative margin-top as well, but you'll probably have to wrap the 2 outer divs with a new div.
HTML:
<div class="outer">
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
CSS:
.outer {
width: 100%;
position:relative;
}
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
// position: relative; // REMOVED
}
.logo{
position:absolute;
left: 50%;
top: 50%;
margin-left: -100px;// half-width of logo
margin-top: -100px;// half-height of logo
z-index: 20;
}
You can do the following to make it center
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
DEMO
Is it the logo that doesn't resize? If so, try this:
.logo{
position:absolute;
left: 50%;
top: 20%;
margin-left: -100px;//half-width of logo
z-index: 20;
}
The logo should be able to resize now.
I am trying to center some so that they are displayed within the center, however the tricky part is the html is within a number of (part of the html is static, and part of it is dynamic from a database).
See the screenshot as an example of how it currently looks (I want this content in the centre)
http://postimg.org/image/5fc6ecgy7/
note - the site is using the base 960 grid system
Below is the HTML:
<div class="">
<div class="">
<div class="">
<div id="national-prize-feed" class="panel-wrapper ">
<div class="border">
<div class="content clearfix add-radius">
<div style="padding:10px 0px;">
<div id="nation-prizes-collection" class="clearfix">
<div class="summary"></div>
<div class="">
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png">
</div>
</div>
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="Football" src="/images/prizes/football.png">
</div>
</div>
</div>
<div class="keys" title="/pages/index/slug/prizes" style="display:none">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My specific css (there is a lot more.. it is based on a grid based layout)
div.prizes {
float: left;
}
div.prizes img {
width: 280px;
}
.prizes-img {
padding: 0 7px 0 7px;
margin: 7px 5px 7px 5px;
max-width: 100%;
height: auto;
}
In order to position a DIV to the center of a screen, you need to set a static width of the div to be centered, left: 0px, right: 0px, and the respective margins to auto.
Here is an example: http://jsfiddle.net/pR4hq/
<style>.center{
position: relative;
display: block;
width: 120px;
background: rgb(90,90,90);
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}</style>
<div class="center">Center Content</div>