Hi i'm encountering an absolute stupid problem. iam currently designing a website with an center which includes two elements, a logo and an navigation icon. Between these two things should be a space even if the site is resized due to a low resolution or a mobile device.
but they are overlapping constantly! i have no idea what i could do...
This is the current markup:
<div id="navContainer">
<div id="topNav">
<div id="logo"><img src="images/logo.png"/> </div>
<div id="mobileNav"></div>
</div>
and its styling:
#navContainer {margin:0 auto;}
#navContainer:hover{background: rgba(255,255,255,0.2);cursor: pointer; width:100%;}
#topNav{width:50%; margin:0 auto;}
#logo{text-align:left; min-width:250px;}
#mobileNav{text-align:right; position:relative; bottom:50px; }
my goal is to get the navigation working like: http://www.teehanlax.com/
I think you are adding more than you need to. If you take out the logo and mobileNav divs and float the link tag to the right you'll get what you're looking for.
<div id="navContainer">
<div id="topNav">
<img src="images/logo.png" />
<img id="hamburger" src="images/navIcon.png"/>
</div>
</div>
a{
float:right;
}
Demo: http://jsfiddle.net/39QVp/
I would add a size for both your divs since you are using images. Then float the elements left and right. That should fix your problem.
#logo{text-align:left; min-width:250px; float:left;}
#mobileNav{text-align:right; position:relative; bottom:50px; float:right}
Try using absolute positioning for the images
#navContainer {margin:0 auto;}
#navContainer:hover{background: rgba(255,255,255,0.2);cursor: pointer; width:100%;}
#topNav{width:50%; margin:0 auto;}
#logo{ min-width:250px;}
#logo img{position:absolute;left:0;}
#hamburger{position:absolute;right:0;}
Related
I try to redesign my website with device compatibility.
I use this code for min-width768px which means desktop or laptop devices.
<div style="width:100%;">
<div style="width:20%; height:60px; margin-top:10px; float:left;">
<img src="images/logo.png" width="155" height="60" alt="Logo">
</div>
<div class="menu" style="width:70%; height:50px; margin-top:25px; font-size:12px; float:left;">
<ul class="yatay_menu">
<li>
<a href="#" title="Anasayfa">/a>
</li>
<li>
</li>
<li>
</ul>
</div>
<div class="menu" style="width:10%; height:80px; margin-top:20px; float:left;">
<img src="images/telefon.png" width="147" height="40">
</div>
<div class="responsive_menu"><i class="fa fa-bars" style="color:#b0063a; font-size:28px;"></i></div>
<div style="clear:both;"></div>
</div>
In compatibility version of this code I hide menu and phone number divs. Instead of them until 480px I show another div which is a contains bars icon.
.menu { display:none; }
.responsive_menu { display:block; width:80%; margin-top:25px; }
What i want is this icon has to align right side of div. However it isn't work. I use float right but it isn't displayed beacause dimension of page. Image is exactly explain the issue.
There are many ways to remedy this.
using divs with percentage widths on devices that scale is asking for problems, especially if there is content overflow on them.
The safest way to do this, is to use absolute positioning for the menu button.
Something like this :
#menuButton
{
position:absolute;
top:15px;
right:10px;
}
This makes the element titled 'menuButton' positioned from the right, ensuring it's always on the right side of your view.
Based on your fixed edit: i'd propose just giving your menu icon a position: fixed; when displayed. The draw back is that you'd need the title bar fixed as well....
#menu_icon{
position: fixed;
right: 15px;
}
OR you can give the parent containing div width: 100%; and then give the icon absolute right: 15px; like, this is better overall, imo:
.responsive_menu{
position: relative;
width: 100%;
}
#menu_icon{
position: absolute;
right: 5px;
}
I suggest you to use the most popular HTML, CSS, JS Framework which provides responsive containers applicable for your mobile. http://getbootstrap.com/
I have a max-width wrapper, within it are four boxes of a fixed width and height. When the browser window is reduced, the boxes fall inline and centered within the container, but the alignment is slightly out, as if there's a small left margin.
Here is a jsfiddle: http://jsfiddle.net/ve2fyrh7/
If I remove "text-align:center;" from #boxcontainer it clears up the alignment issue, but then the boxes won't be center-aligned inside the container which I require when the browser window is reduced.
If I remove ".box:last-child" then that also solves the alignment issue, but then all four boxes won't be inline when the browser window is >960px.
I appreciate any help/suggestions on where I'm going wrong.
CSS
#wrapper {
max-width:960px;
margin:0px auto 0px auto;
}
#boxcontainer {
width:100%;
background:#f8f8f8;
font-size:0;
text-align:center;
}
.box {
width:225px;
height:200px;
display:inline-block;
background:#ccc;
font-size:18px;
margin:0px 20px 20px 0px;
}
.box:last-child {
margin-right:0px;
}
HTML
<div id="wrapper">
<div id="boxcontainer">
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
<div class="box">
<h3>Test</h3>
</div>
</div>
</div>
Add float:left to your box class.
If you want to solve this on a specific media device use media query.
The margin-right:0px; on the the last div is causing the spacing issue. If i remove that, it seems to be fine. http://jsfiddle.net/ve2fyrh7/2/.
I have a div that I am using as a "sidepanel" that has a width:100% and position:fixed. this sidepanel houses my navigation. I also have another div that is named "content". it has a width of 600px and I have used to "margin-left:auto, margin-right:auto" to centre it in between the sidepanel and the edge of the page.
But the problem is that it the two divs are overlapping. how do I stop it from overlapping?
I have included the HTML and CSS coding below.
HTML
<body>
<div id="leftpanel">
<div id="nav">
<ul>
<li>home</li>
<li>the future</li>
<li>contact details</li>
</ul>
</div>
</div>
<div id="content">
<div id="header">
<p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
</div>
</div>
</body>`
CSS
#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}
This is how you can stop them from overlapping.
DEMO
#content {
margin-left: 320px;
}
When you use position:fixed;, it means that element does not care about the other elements on the page. It does not care if it's touching them, over them, underneath them. It only cares about it's position relative to the window (ie: the user's screen).
So because your #leftpanel is on the very left side, and has width of 320. Just set a margin-left of the #content to 320px.
What I am trying to achieve seems relatively simple, but I can't seem to get it to work.
I want to have my article previews on my website appear in tiled form.
The tiles, for the sake of the argument would be a fixed height and width. Lets say 300px by 300px.
I want then for the title of the article and perhaps even a short excerpt to appear, overlaying the image. Kind of like what theverge.com have.
What I need help with is that Im just trying to do a proof of concept mock up. I can do the specific styling fine myself but its literally just the structure I cant seem to figure out.
I cant seem to get the h1 to overlay the img.
I've tried creating a parent container div, and then containing both elements within separate div containers and giving the container with the h1 or "post info" absolute positioning.
But It never seems to work out quite right.
HTML:
<div class="container">
<div class="feat-img">
<img src="www.sample.com"/>
</div>
<div class="post-info">
<h1>Post Title</h1>
</div>
</div>
CSS:
.container: {width: 300px; height:300px;float:left;}
.feat-img img: {width:300px; height:300px; float:left;}
.post-info: {position:absolute;bottom:0px;}
Ok so I know there is a lot wrong with that style but I just did it off the top of my head there. It has the general jist of my train of thought.
Any help would be greatly appreciated as I havent found anything (Probably becuase I dont really know what Im searching for)
First, you need to know how an absolute div relates to a relative one.
Add
.feat-img {
position:relative;
height:300px;
width:300px;
}
to your CSS,
and place the .post-info div inside the .feat-img div:
<div class="feat-img">
<div class="post-info">
<h1>Post Title</h1>
</div>
<img src="image.jpg"/>
</div>
apply this CSS:
.post-info {
position:absolute;
bottom:0px; /* or whatever position */
left:0px; /* or whatever position */
}
Please have a look at this jsFiddle for a quick mockup: http://jsfiddle.net/ZJT6f/
Cheers,
Jeroen
look on this:
demo
html code:
<div class="container">
<div class="feat-img"><img src="http://lorempixel.com/300/300/"/></div>
<div class="post-info"><h1>Post Title</h1></div>
</div>
css code:
*{margin:0; padding:0}
.container: {width: 300px; height:300px; display:block; position: relative;}
.feat-img img: {width:300px; height:300px; position:absolute; top:0; left:0; display:block;}
.post-info{position:absolute; top:130px; left:0; display:block; width:300px; height:300px; text-align: center; color:#fff;}
I'm making a website using Bootstrap and Wordpress. It's a 2-column layout - left sidebar, right content. The right content is dynamic and expands by infinite scroll. I've tried to make the left sidebar 100% height through several techniques but to no avail.
I'd like the sidebar to continue down according to the size of the viewport/height of the right content div.
I've made a bare fiddle: http://jsfiddle.net/ydPMr/3 but it would be better if you saw what I was talking about on my dev page: http://joshuawalker.koding.com.
Here is the basic structure of my page:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>
If anyone has any ideas on how to make the sidebar to stretch full height, I would appreciate it.
Thanks!
This is working fine for me. Fiddle
I set the min-Height to 500px. If you don't want minimum, remove it. It will work according to the height of your content in the content div. Like this Fiddle
<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">
</div>
</div>
and style
<style type="text/css" >
.wrapper
{
min-height:100%;
width:100%;
position:relative;
background-color:Black;
display:inline-block;
}
.sidebar
{
width:20%;
top:0px;
left:0px;
bottom:0px;
position:absolute;
background-color:Aqua;
}
.content
{
min-height:500px;
width:80%;
position:relative;
background-color:Gray;
float:right;
}
</style>