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/
Related
So, i'm super new to HTML/CSS. For my class I have to make a portfolio webiste.
I want to be very simple. So, I'm starting off with my name centered in the middle of the page, and then underneath I want it to look like this:
About Graphic Design Studio Art (but, spaced out a little obviously)
Here is my html:
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
</div>
<div id="indexheader"><a rel="title">THIS IS MY NAME</a>
</div>
<div id="links">
<a rel="#about">About</a>
</div>
<div id="links">
<a rel="#design">Graphic Design</a>
</div>
<div id="links">
<a rel="#art">Studio Art</a>
</div>
</div>
</div>
<!-- END: Sticky Header -->
Here is my CSS:
/* Make Header Sticky */
#header_container {
background:transparent;
height:60px;
left:0;
position:fixed;
width:100%;
top: 40px;
text-align: center;
}
#header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 160px;
z-index: 999;
float: right;
}
body.top-navigation-position-below-banner #navigation-bottom {
position: fixed;
top: 0;
border-bottom: none;
z-index: 999;
}
#page-header-wrapper {
margin-top: 180px;
}
#links {
height: auto;
width: 100%;
margin-top:30px;
background-color:transparent;
text-align: center;
margin-top: 10px;
margin-left:0%;
padding: 0px;
}
http://jsfiddle.net/r7K26/
I also tried to make it a sticky-header. Not sure if that's right either. IM A HUGE NOOB. Forgive me.
You are closing your div with id #header immediately, so the elements beneath is are not receiving any styling. That might be what you want, but then you have an extra at the end of your html.
You can center your div a lot of ways, but the following should work fine:
#indexheader {display:block;width:100%;text-align:center;}
Good luck!
Well, you don't need that many divs first of all. Look at this, for example:
Html:
<div class="myInfo">
<h1>Your Name</h1>
<ul class="myLinks">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
And actually, you don't even need a div in this case but regardless, having the class on one div you can style with selectors such as:
.myInfo H1 {....}
.myInfo UL {..}
etc
or just
.myLinks {} for the url and then:
.myLinks li {} for the list items.
I know this is a fast answer but as you are learning, I think it might be better to 'sort of' give you some pointers instead of just doing it all, right?
:)
You're very close, and here's one solution using your code as a base. Try this styled JSFiddle and see if its what you need. Please feel free to play around with the code, and hit the Run button when you are ready to see the results. http://jsfiddle.net/TalkingRock/MAuzN/
The structure:
The html code is simplified by using "header_container" to wrap the entire header (title and menu). The "indexheader" is placed in its own div. A new menu div now contains/wraps only the menu items.
<div id="header_container">
<div id="indexheader">THIS IS MY NAME</div>
<div id="menu">
<div class="links">About</div>
<div class="links">Graphic Design</div>
<div class="links">Studio Art</div>
</div> <!-- end menu -->
</div> <!-- end header_container -->
The CSS
Inline-block is used to shrink wrap, center, and display the menu items in a single line. Inline-block has a natural 4px margin around each item, and that can be removed by removing the white space in-between each inline-block item in the html code. You'll also need to add "vertical-align:top". Inline-block is a good style to learn, has good browser support, and comes in handy.
#header_container {
margin:0px;
padding:0px;
border:0px;
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;
background-color:transparent;
position:fixed;
top:40px;
}
#indexheader {
text-align:center;
padding:10px;
}
#menu {
text-align:center; /* text-align center works because of the inline-block */
}
.links {
display:inline-block;
vertical-align: top
}
Good article on lnline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Inline-block support: http://caniuse.com/#feat=inline-block
Here are a few other articles you'll find useful. CSS Fixed Menus:http://www.w3.org/Style/Examples/007/menus.en.html
The Z Index: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Note: The div that holds your contents needs a top padding or margin tall enough to make sure it isn't covered up by the fixed menu. Position fixed will be buggy in touch devices, especially handheld phones. In your original code there is an extra div in your html, id's can only be used once per page, use href for your links, and "backgound-color:transparent" (transparent is the default style).
I try to use the
position:fixed;
width:10in;
but when resize the browser, the contents go out of boundary(there's no way to reach those elements).
i need an alternative because i want the nav bar to be at top at all times.
edit: i also want the contents to be inline which is not served by using
width:100%;
display:inline or inline-block
check here - http://jsfiddle.net/dF4Bx/1/
In simple language -
I need that the browser should provide a horizontal bar if the width is not fullfilled by the resized window.
Making your top bar sticky with CSS
#header{
position:fixed;
left:0px;
top:0px;
height:30px;
width:100%;
background:#999;
}
I see what's your problem.
Use this HTML instead of yours:
<div class="back">
<div id="header" class="front">
<ul>
<li>Home</li>
<li style="float: right;">Login</li>
<li style="float: right;">Register</li>
<li style="float: right;">Search: <input type="text" class="textbox" name="sr"></li>
</ul>
</div>
</div>
And put this rule into your CSS:
#header ul li {
margin-right: 7px;
}
And too, change this width 8in to 95%:
div.back div.front {
background-color: #0072C6 !important;
margin: auto;
width: 95%;
}
Note that i removed the inline style padding of search element.
Try with below CSS,
position:fixed;
top:0;
width:100%;
z-index:99;
8In is such a big value and moreover it is fixed width that's why it keeps going beyond browser. Use % values for responsive designs.
So change width like this
div.back div.front {
width:100%;
}
then about keeping the elements inline,
Use something like margin-left:20% instead of 24In in padding:24px 20px 24px 2in!important;.
Even it will break the line when it reaches a limited browser window. You can reduce this range by avoiding larger fixed values of padding and width in your code.
Check Fiddle: FIddle
to arrive to your purpose you can try this code :
.divClass{
position:fixed;
top: 0px;
z-index: 99;
width: 80% /*for responsible width*/
}
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;}
Im just getting in to web dev (mainly an iOS, Java, c# programmer). I have a simple problem bt it is anoying.
<div id="banner">
<img src="Styles/Banner.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
I have a banner which is a simple image (.jpg) and I want to overlay some text. The problem is positioning the text over the banner. I dont realy want to use apsolute positioning. I would like to have both the image and the text centered. The problem is I ony seem to be able to overlap the text over the image when using apsolute positioning, which will be effected if the window is resised. Whats the best/simplist way to do this.
Just Like to thank all of you for being so helpful. GC
Live demo
Hey now i think you should want to this
HTML
<div id="banner">
<img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" />
<div id="bannerText">
User ID
</div>
</div>
Css
#banner{
position:relative;
background:green;
padding:10px;
}
img{
vertical-align:top;
}
#bannerText{
position:absolute;
top:20px;
left:10px;
background:red;
}
Demo
You have to give the parent element (#banner) a position: relative; to make the absolute position of its child (#bannerText) dependent on the banner position and not on the window border.
If you can use image as background instead of <img> tag using css like following example
#bannerText
{
background: url("Styles/Banner.jpg") no-repeat center center;
width: 123px;
height: 123px;
text-align: center;
}
If you don't want to use Position:
if you want to use <img> then go with "feeela's" ans
I have tried using CSS to set the position of the background and the objects to all possible types (fixed, relative, absolute). I have also adjusted the width, min-width of the background image.
The Test Page
CSS:
Background:
/* BG Image Style */
.bg {
position: relative;
width: 100%;
height: 100%
}
Player
/* Player Style */
#player {
position: absolute;
width: 680px;
top: 60px;
left: 380px;
border: outset 5px white;
}
Menu
/* Nav Menu */
ul#menu {
position: absolute;
top: 175px;
left: 68px;
padding: 0;
list-style: none;
clear: both;
}
HTML:
<html>
<head>
<title>BKK Testing Zone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png"/>
<div id="player">
<script type='text/javascript' src='http://thebkk.net/Scripts/jwplayer/jwplayer.js'>
</script>
<div id='mediaspace'></div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://thebkk.net/Scripts/jwplayer/player.swf',
'playlistfile': 'http://www.thebkk.net/test/playlist.xml',
'backcolor': '000000',
'frontcolor': '00FFFF',
'lightcolor': '33FF33',
'playlist': 'right',
'controlbar': 'bottom',
'width': '680',
'height': '360',
});
</script>
</div>
<ul id="menu">
<li class="home"></li>
<li class="rules"></li>
<li class="forums"></li>
<li class="links"></li>
</ul>
</body>
</html>
Thanks! I searched around, and there were parts of what I wanted to do, but can't seem to find exactly what it is I want.
You might want to read up on "Responsive Web". There's a lot of ideas in there in terms of making fluid grids that might help in what you're doing.
Regardless, I don't know if you're going to get what you're looking to do to work perfectly with CSS alone. You'll probably have to work with some JavaScript as well.
I would start over and try doing something like this for basic HTML:
<body>
<div class="container">
<div class="media"></div>
<div class="menu"></div>
<img src="background.png" />
</div>
</body>
I would put things in a container div just because I don't like working directly off the body element for CSS. It's a little more self contained modules.
As for CSS, you will make your background image like you have.
Your menu will then need to images put into the list items (LI) with the IMG tag. Those IMG will need a width:100% style.
Right now, you're using the menu images as backgrounds, which won't be fluid very well, so just like you did with the main background image, you need to do with your menu.
You then need to set the menu container width to be a % of the larger container (ie. the background image).
To get this % you need to divide the width of the area you want the menu to fit in by the total container width.
Your background image looks like it's 1280px. The total width of the "window" is like 214px.
This would mean the width of the menu should be:
214px / 1280px = 0.1671875 * 100% = 16.71875%
You then need to place the menu container properly using the same CSS as you where using but use % instead of pixels because this will allow the positioning to move with the browser size.
The upper left corner of that background "window" looks like it starts 20px in from the left and 263px down from the top.
20px / 1280px = 0.015625 * 100% = 1.5625%
left: 1.5625%
263px / 960px = 0.27395833333333333 * 100% = 27.39583333333%
top: 27.39583333333%;
Now, the menu container should have a proportional width compared to the background image (which is what you're trying to line the menu up with), meaning it should sort of expand or contract with the background image.
And remember the menu HTML needs to be like this:
<ul>
<li><img src="..." alt="" /></li>
[...]
</ul>
with CSS:
#menu li img{
width:100%;
}
I'm not really sure this will work but it might get you going in the right direction. Regardless, I don't see the result of this being very good.
This might be a case where you're better off making a full Flash website (as much as I don't like using Flash).
I hope that helps!
Cheers!
-- UPDATE --
I put together a little proof-of-concept. I only tested it in Chrome and the latest FF. As I expected, you can get it to work but you're going to run into support issues.
Anyway, here's a background image I made with basically 2 target areas (boxes). It's similar to original one.
background image (1000x750. I started with 1024x768 or iPad dimensions and made it 1000px wide for easy percentages)
http://tinypic.com/r/11r9edw/5
menu image 1
http://tinypic.com/r/2s7ucmg/5
menu image 4 (i'll skip uploading all the menu images for sake of brevity)
http://tinypic.com/r/2nlv42x/5
The CSS (percentages are sloppy, but it's only a proof-of-concept)
body{
margin:0;
padding:0;
}
.container{
position: relative;
width: 100%;
height: 100%;
background-color:#F0F;
}
.bg-img{
display:block;
position: relative;
width: 100%;
height: 100%;
z-index:1;
}
.menu{
position:absolute;
width:15%;
height:33%;
top:33%;
left:10%;
border:1px dashed red;
z-index:10;
}
.menu ul{
height:100%;
margin:0;
padding:0;
}
.menu li img{
width:100%;
height:100%;
margin:0;
padding:0;
}
.menu li{
position:relative;
height:24.5%;
}
.media{
position:absolute;
width:43%;
height:15%;
top:16%;
left:31%;
background:#9CC;
z-index:10;
}
The HTML
<div class="container">
<img class="bg-img" src="bg.png" alt="" />
<div class="menu">
<ul>
<li><img src="menu1.png" alt="Menu 1" /></li>
<li><img src="menu1.png" alt="Menu 2" /></li>
<li><img src="menu4.png" alt="Menu 3" /></li>
<li><img src="menu4.png" alt="Menu 4" /></li>
</ul>
</div>
<div class="media"></div>
</div>
I more or less just used position:absolute to "float" everything as a ratio/percentage of the background image, which is stretched to 100% width/height of the browser.
Defined heights/widths are necessary (and setting margins/padding to zero to reset browser defaults).
Chrome seemed to work well. FF seemed to have an issue with height:100%. It's possible it could be cleaned up some more, but that should be a start to get what you're looking to do with CSS.
But like I said, this kind of thing isn't well handled in CSS, even with CSS3 this kind of design will cause a lot of headaches for backwards compatibility.
HTML 5 is here and that's not going to be a magic bullet either. This design concept is very vector based and Flash is perfect for that kind of thing.
Hope this helps! =)
You cannot combine a relatively sized background with elements that are of fixed size and with fixed margins, and expect the fixed elements to "follow" the background when you resize the window.
My suggestion would be that you use a fixed size background as well, that is the only way to get the other elements (menu etc.) to end up at its expected spot.
Also, when creating a background, you should really use the CSS background property, instead of using an image like you do.
This:
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png">
Should probably be this:
body { background: url('http://thebkk.net/Images/BVF-Template-Complete.png') no-repeat; }