The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Website compatible for Iphone/Mobile
fattycss
post Jan 18 2014, 12:18 PM
Post #1


Member
***

Group: Members
Posts: 79
Joined: 17-January 14
Member No.: 20,249



Hey there, My website is:

http://www.allallallallalla.allalla.com/

The problem is when I open it on my iphone/ipad It's all messed up. (you can try it on your phone).
Here is the code in html:

CODE
<!DOCTYPE html>
<html>
<head>
<title> Tennisvereniging Nedlloyd</title>
<link rel="stylesheet" type="text/css" href="home.css"/>
</head>
<body>
<br>
<br><br><br>
<div id = "logo">Tennisvereniging Nedlloyd</div>
</div>
<div id = "kader">
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Informatie</a>
        <ul>
            <li><a href="#">Leden</a></li>
        </ul>
    </li>
    <li><a href="#">Agenda</a>
    </li>
    <li><a href="#">Contact</a>
        <ul>
            <li><a href="#">E-mail</a></li>
        </ul>
    </li>
    <li><a href="#">Regels</a>
    </li>
</ul>
<div id = "rechtsboven">
</div>
</a>
<div id = "inhoud">
</div>
<div id = "rechtsboven2">
<a href="http://www.buienradar.nl" target="_blank">
<img src="http://gratisweerdata.buienradar.nl/radar.php" alt="Buienradar.nl"></a>
<div id = "bovenin">
</div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="nedlloydtennis.nl" data-lang="nl" data-dnt="true">Tweeten</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="http://f.kulfoto.com/pic/0001/0041/AQx9840977.jpg" class="facebookbutton" target="_blank" align="left"><img src="http://www.niftybuttons.com/classic/facebook.png" border="0"></a>
</div>
</div> <br />
</a>
</div>
<div id= "bar">&copy;Marc van Houts</div>
</body>
</html>


Here CSS:

CODE
body
{
background-image:url('afbeeldingen/ruitlos2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
width: 100%
}
#logo
{
position: relative; bottom: 60px; left: 55px;
font-size: 48px;
font-family: times;
}
#kader
{
position: relative; right: 372px;
width: 814px;
background-color: transparent;
margin-left: auto;
margin-right: auto;
height: 630px;
}
#menu
{
position: relative; bottom: 50px; left: 50px;
font-size: 20px;
z-index: 1;
display: in-line;
background-image:url('afbeeldingen/navbg3.png');
}
#inhoud
{
color: black;
border: 4px solid rgb(0,0,0);
border-radius: 15px;
width: 635px;
height: 600px;
background-color: rgb(236,170,92);
right: -49px;
position: relative;
}
ul {
    font-family: times;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    float: left;
    width: 120px;
    margin-right: 10px;
    background-image:url('afbeeldingen/navbg3.png');
    border-radius: 10px;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 0px;
    background: transparent;
    text-align: center;
    z-index: 1;
    position: center;

}
ul li a:hover {
    background: transparent;
    background-image:url('afbeeldingen/navbg3.png');
    color: rgb(250,250,210);
    border-radius: 10px;

}
li:hover ul {
    display: block;
    position: center;
    color: rgb(250,250,210);
    border-radius: 10px;
}
li:hover li {
    float: none;
    font-size: 16px;
}
#rechtsboven
{
position: relative; right: -4px; bottom: 160px;
float: top;
width: 310px;
height: 310px;
background-repeat:no-repeat;
background-image:url('afbeeldingen/balll.png');
}
#rechtsboven
{
position: relative;
float: right;
width: 28%;
border: 0px solid rgb(0,0,128);
border-radius: 4px;
}
#rechtsboven2
{
position: relative; right: -710px; bottom: 414px;
float: center;
width: 256px;
height: 406px;
border-radius: 5px;
border: 4px solid rgb(0,0,0);
}
#bar {
position: fixed;
width: 100%;
float:bottom;
height:3px;
color: white;
position: relative;
font-size: 12px;
}
.twitter-share-button {
position:relative;
top:-250px; left: -190px;
}
.facebookbutton {
position:relative;
top:-249px; left: -220px;
}
#bovenin
{
color: black;
border: 4px solid rgb(0,0,0);
border-radius: 15px;
width: 256px;
height: 174px;
background-color: rgb(236,170,92);
position: relative; right: 4px; bottom: 609px;
}


what do I need to add and how to make it compatible for phone/ipad?

This post has been edited by fattycss: Jan 18 2014, 12:19 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2014, 01:28 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,867
Joined: 10-August 06
Member No.: 7



There are a few errors:
http://validator.w3.org/check?uri=http://a...la.allalla.com/
http://jigsaw.w3.org/css-validator/validat...la.com/home.css

I haven't looked at the page in a mobile browser, but one main problem seems to be that a lot of the content is centered while the background image and "logo" text is not. Because of that the design falls apart unless the user's browser window size is the same as the designer's, even if you use a desktop browser. In addition, the relative positioning of e.g. div#kader seems to move it too far to the left. Also the page is a little wider than my browser window, resulting in an unnecessary horisontal scrollbar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 18 2014, 02:26 PM
Post #3


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Besides what Christian said, a technique that can help for phones is css media queries for responsive web designs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fattycss
post Jan 18 2014, 02:44 PM
Post #4


Member
***

Group: Members
Posts: 79
Joined: 17-January 14
Member No.: 20,249



Thanks christian,

It all sounds so complicated! Fixed the CSS.. need to fix the html soon.. no idea how to fix the positioning for phone/diff desktop sizes tho, but ill keep trying.. new to this all so yea!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2014, 03:58 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,867
Joined: 10-August 06
Member No.: 7



I'd start by removing the "position: relative" parts. If you must adjust the placement of things like that, try using margins instead. Also, if you want the content centered, make sure the background image is centered as well. Finally, if the design relies on the background image and page content being of the same size and in the exact same places (which is a fragile to design web pages) you may want to resize the background image to fit the browser window: http://www.css3.info/preview/background-size/ (but older browsers don't support it: http://caniuse.com/#feat=background-img-opts ).

Media queries may not be necessary, in fact basic page designs usually work fine in mobile browsers by default. Sometimes it may help to add

CODE
<meta name="viewport" content="width=device-width">

to the page's HEAD section, though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 18 2014, 05:32 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE
Media queries may not be necessary, in fact basic page designs usually work fine in mobile browsers by default.

Really? Because of high resolutions of many, even small, devices?
Then, there shouldn't be the need for discussions about responsive design.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fattycss
post Jan 18 2014, 05:39 PM
Post #7


Member
***

Group: Members
Posts: 79
Joined: 17-January 14
Member No.: 20,249



What you people are saying is not using px's like width: 635px; but %?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fattycss
post Jan 18 2014, 05:43 PM
Post #8


Member
***

Group: Members
Posts: 79
Joined: 17-January 14
Member No.: 20,249



Christian, could you show me 1 thing? You said "I'd start by removing the "position: relative" parts. If you must adjust the placement of things like that, try using margins instead".

This is the inhoud(big box) code in css and then html:

CODE
#inhoud {
color : black;
border : rgb(0, 0, 0) solid 4px;
border-radius : 15px;
width : 635px;
height : 600px;
background-color : rgb(236, 170, 92);
right : -49px;
position : relative;
}


HTML:

CODE
<div id = "inhoud">
</div>


it shows normal on the webpage as seen on www.allallallallalla.allalla.com

Once you resize ur browser, u see the big box is only being shown half. Could you show me with that piece of code up there^ how to use margins instead of position: relative;?
I got width: 635px; height 600px; and right: -49px;.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fattycss
post Jan 18 2014, 05:50 PM
Post #9


Member
***

Group: Members
Posts: 79
Joined: 17-January 14
Member No.: 20,249



Christian, Apparantly div Kader is the bad one that moves everything in the wrong place once resizing. The code for kader in css is:

CODE
#kader {
position : relative;
right : 372px;
width : 814px;
background-color : transparent;
margin-left : auto;
margin-right : auto;
height : 630px;
}


Everything inside div kader is messed up once resizing
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2014, 07:28 PM
Post #10


.
********

Group: WDG Moderators
Posts: 7,867
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Jan 18 2014, 11:32 PM) *

QUOTE
Media queries may not be necessary, in fact basic page designs usually work fine in mobile browsers by default.

Really? Because of high resolutions of many, even small, devices?
Then, there shouldn't be the need for discussions about responsive design.

No I just meant that basic designs reflow to fit regardless of window size (basically the same as http://htmlhelp.com/faq/html/design.html#screen-size says).

IMO responsive design is for more complex layouts (multi column etc), that can't reflow easily in narrow windows.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2014, 07:34 PM
Post #11


.
********

Group: WDG Moderators
Posts: 7,867
Joined: 10-August 06
Member No.: 7



QUOTE(fattycss @ Jan 18 2014, 11:50 PM) *

Christian, Apparantly div Kader is the bad one

Agreed, I mentioned it in your parallell thread.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 18 2014, 07:36 PM
Post #12


.
********

Group: WDG Moderators
Posts: 7,867
Joined: 10-August 06
Member No.: 7



QUOTE(fattycss @ Jan 18 2014, 11:39 PM) *

What you people are saying is not using px's like width: 635px; but %?

Depends on the context...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fattycss
post Jan 19 2014, 09:05 AM
Post #13


Member
***

Group: Members
Posts: 79
Joined: 17-January 14
Member No.: 20,249



I made it compatible with Iphones/Ipads. Just not Android Devices so thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th August 2018 - 01:33 AM