d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Graphic Design > Nero, Shut Up And Rice: Gaiden > The Saga Of Css/html
1235Next
Add Reply New Topic New Poll
Views: 1433Replies: 49Track Topic
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#1
Jul 9 2015 12:35am
going to use this thread to track my content and progression with regard to html/css skills and creativity specifically for my mobile device.

as i'm working on a setup, i'll try to post any psds i use for icons or wallpapers, as well as pastebins to my css for some of you actual nerds to criticize or learn from.

once a setup is completed i'll pack it with the icon theme, as well as the completed HS/LS and any widgets that are included in the design.

for now, to get back into the swing of things i've spent the day just doing some basic elements to get my feet wet and figure out what flies on an iphone.

eventually i'll be working on actually learning some js as well, but for now i'm doing what i've always done with js: steal them from other people.

the rigz:

-i5, primary mobile device
-photoshop, primary mock-up planning and icon creation tool
-gedit, because dreamweaver is for fuccbois

i've got some neato ribbons and some other shit that i made, but we'll start this off with my first real struggle: centering these fucking text elements inside of this fucking div

screenshot: http://i.imgur.com/VGzUqqP.png

associated css:

Code
#header{
position: absolute;
top: 0px;
height: 50%;
width: 100%;
background: #0a9092;
opacity: 0.6;
}

#clock{
top: 50%;
position:absolute;
font-size:20px;
font-family:Krungthep;
text-shadow:0px 0px 0px #292828;
text-transform:uppercase;
}
#hour{
color:#FFF;
font-size: 20px;
}

#minute{
color:#FFF;font-size: 20px;
}

#calendar{
top: 54%;
position:absolute;
font-size:10px;
font-family:Krungthep;
text-transform:lowercase;
}

#date{color:#fff;}
#month{color:#fff;}
#weekday{color:#fff;}

#footer{
position: absolute;
bottom: 0px;
height: 50%;
width: 100%;
background: #f56f6c;
}


associate html:
Code
<div id="header">
<div id="calendar">
<a id="month"></a><a id="weekday"></a><a id="date"></a>
</div>


<div id="clock">
<a id="hour"></a></a><a id="minute"></a>
</div>

</div>


if i position them relative to the left like i have with the vertical placements they'll be off-centered, and that shit is dumb. how do fix?
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#2
Jul 9 2015 01:08am
Mobile screenshot


This is with the clock and calendar elements with margins at 50. Looks bad.
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#3
Jul 9 2015 01:45am
Code
#header{
position: absolute;
top: 0px;
height: 50%;
width: 100%;
background: #0a9092;
opacity: 0.6;
}

#clock{
///position: relative;
///width: 200px;
///margin-right: auto;
///margin-left: auto;
///top: 35%;
///text-align:center;
font-size:20px;
font-family:Krungthep;
text-shadow:0px 0px 0px #292828;
text-transform:uppercase;
}
#hour{
color:#FFF;
font-size: 20px;
}

#minute{
color:#FFF;font-size: 20px;
}

#calendar{
///position: relative;
///width: 200px;
///margin-left: auto;
///margin-right: auto;
///top: 41%;
///text-align: center;
z-index:50;
font-size:10px;
font-family:Krungthep;
text-transform:lowercase;
}

#date{color:#fff;}
#month{color:#fff;}
#weekday{color:#fff;}



put /// in front of the lines i changed.
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#4
Jul 9 2015 02:06am


Got it. Moved the clock and calendar out of the header div and raised the font size. Boom. Now the easy part is done :(

E: as I was making coffee I remembered I should be using ems instead of px for my font siZes for the sake being better at css

This post was edited by Nereaux on Jul 9 2015 02:08am
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#5
Jul 9 2015 02:16am
Now that I've finishedthe bones I should state my goals. Ideally I'd like to achieve what essentially resembles a one page layout for my phone, complete with working widgets on the lock screen to my heavily used apps. The homescreen will essentially serve as a giant folder. In not sure if this is possible but I'd like to try it.
Member
Posts: 32,704
Joined: Dec 27 2007
Gold: 20.18
#6
Jul 9 2015 03:43am
Not sure if worth my dn8.
Member
Posts: 8,783
Joined: Oct 3 2006
Gold: 16,390.15
#7
Jul 9 2015 03:45am
I tried learning this html/css to work with dreamweaver

that lasted about 4 days

Goodluck, Looks great so far
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#8
Jul 9 2015 03:57am
Quote (Swash @ Jul 9 2015 01:43am)
Not sure if worth my dn8.


7/8/2015, 8:09:38 PM Received 15.00 (0.00 -> 15.00) from Cybernetic (1,780.01 -> 1,765.01)

some guild leader

Quote (Lwe12345 @ Jul 9 2015 01:45am)
I tried learning this html/css to work with dreamweaver

that lasted about 4 days

Goodluck, Looks great so far


t4t m9
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#9
Jul 9 2015 04:04am
my next step is creating interactive widgets to be used on my homescreen that will link to an actual app, so i can create the vertical list of my dreams, similar to the android launchers.

e: i'll be making individual widgets for every icon on my homescreen, and maybe a few activator toggles for battery conservation and respring.

e2: @middy, if you have any input on how i can place individual iwidgets on the lockscreen without having to implement them into my lshtml, i'm all ears.

This post was edited by Nereaux on Jul 9 2015 04:09am
Member
Posts: 17,374
Joined: Jul 6 2007
Gold: 12,143.67
#10
Jul 9 2015 04:56am
finished my widgets. not much to see, really. i made them a while ago but i've just been sitting around trying to figure out what i want to do with them.

widgets:

Code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>size</key>
<dict>
<key>height</key>
<integer>55</integer>
<key>width</key>
<integer>420</integer>
</dict>
</dict>
</plist>


Code
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<div id="header">
<div class="title">Kik Chat</div>
</div>

</body></html>


Code
body{
margin: 0;
padding: 0;
color:white;
font-weight:normal;
font-family:Helvetica;
}

@font-face {
font-family: Light;
src: url(Images/Default.ttf);
}

@font-face {
font-family: Krungthep;
src: url(Images/Krungthep.ttf);
}

#header{
position: absolute;
top: 0px;
height: 100%;
width: 100%;
background: #f56f6c;
opacity: 1;
}

.title{
position: absolute;
font-family: Krungthep;
font-size: 20px;
top:50%;
color: #FFF;
left: 10px;
}




widgets are free-floating and assigned links within ios

e: ignore my sbhtml

This post was edited by Nereaux on Jul 9 2015 04:56am
Go Back To Graphic Design Topic List
1235Next
Add Reply New Topic New Poll

© 2003-2024 d2jsp  Contact