🔒 Closed tulong sa mga batak sa web developing

PHC Bor1s · Aug 11, 2019

bat nagkakaron ng puting sobrang line sa kanan ng second div ko.

Deleted member 622421 · Aug 11, 2019

PHC Bor1s said:
bat nagkakaron ng puting sobrang line sa kanan ng second div ko. View attachment 662509

gawin mong 100% yung width paps

PHC Bor1s · Aug 11, 2019

PHC _ Mark said:
gawin mong 100% yung width paps

naka 100% na po pareho width and height e. di ko kasi masend yung code dito. mahaba masyado

PHC Bor1s · Aug 11, 2019

tinry ko gawing mas mataas pa sa 100% yung width,lumalapad lang yung buong black div,may puti padin siya sa dulo

Deleted member 622421 · Aug 11, 2019

PHC Bor1s said:
tinry ko gawing mas mataas pa sa 100% yung width,lumalapad lang yung buong black div,may puti padin siya sa dulo

check mo css ng body mo baka hndi nka 100% yung width

Rayquaza · Aug 11, 2019

naka float ba yan ts?

PHC Bor1s · Aug 11, 2019

Rayquaza said:
naka float ba yan ts?

hinde e

Impostor Syndrome · Aug 12, 2019

ipakita mo html code mo.

Mr. Stark · Aug 12, 2019

PHC Bor1s said:
bat nagkakaron ng puting sobrang line sa kanan ng second div ko. View attachment 662509

Margin ng body gawin mong 0.

PHC Bor1s · Aug 12, 2019

html

PHC Bor1s · Aug 12, 2019

font-face
{
font-family: first;
src: url(geek.ttf);
}
*
{
padding: 0;
margin: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
}
.brand, .search, .menu {
position: absolute;
line-height: 80px;
}
.brand {
margin-left: 40px;
font-family: "Monument Extended";
color: #fff;
font-size: 16px;
}
.search {
right: 140px;
color: #fff;
}
.menu{
right: 40px;
font-family: Helvetica;
color: #fff;
font-size: 20px;
}
.media {
position: absolute;
right: -150px;
top: 50%;
transform: rotate(90deg);
}
.media ul {
list-style: none;
}
.media ul li {
display: inline-block;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
font-family: Helvetica;
font-size: 12px;
font-weight: 300;
letter-spacing: 2px;
margin-right: 40px;
}
.media ul li a{
text-decoration: none;
color: #fff;
}
.media ul li a:hover{
color: #ebcba7;
}

.header {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
font-family: first;
font-size: 40px;
letter-spacing: 3px;
text-shadow: 2px 2px 20px #000;
justify-content: center;
}
h1 span {
-webkit-text-stroke: 1px #000;
color: rgba(0,0,0,0);
}
.bottomnav {
position: absolute;
width: 45%;
height: 80px;
bottom: -40px;
background: #fff;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomnav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 80px;
float: right;
}
.bottomnav ul li {
padding-right: 50px;
display: inline-block;
}
.bar {
position: absolute;
margin: 0;
background: rgba(0,0,0,0.3);
width: 50%;
height: 1px;
top: 50%;
left: 19%;
}
.counter {
position: absolute;
font-family: Poppins;
font-weight: bolder;
color: #000;
line-height: 80px;
padding-left: 50px;
}
.content {
height: 100%;
width: 100%;
background-color: #030000;
z-index: 0;
top: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

.content-wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.content-images {
width: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}

.content-image-wrapper {
height: 220px;
width: 150px;
text-align: center;
position: relative;
}

.content-image-wrapper img{
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
}

.one {
top: -10px;
}
.two {
top: -50px;
}
.three {
top: 20px;
}
.four {
top: -20px;
}

.content-image-wrapper h4 {
font-size: 1.8em;
position: relative;
top: -30px;
opacity: 0.6;
}

.text {
padding-top: 100px;
width: 60%;
font-size: 0.8em;
text-align: center;
}
.story
{
width: 100%;
height: 100%;
}

css

Mr. Stark · Aug 12, 2019

PHC Bor1s said:
font-face
{
font-family: first;
src: url(geek.ttf);
}
*
{
padding: 0;
margin: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
}
.brand, .search, .menu {
position: absolute;
line-height: 80px;
}
.brand {
margin-left: 40px;
font-family: "Monument Extended";
color: #fff;
font-size: 16px;
}
.search {
right: 140px;
color: #fff;
}
.menu{
right: 40px;
font-family: Helvetica;
color: #fff;
font-size: 20px;
}
.media {
position: absolute;
right: -150px;
top: 50%;
transform: rotate(90deg);
}
.media ul {
list-style: none;
}
.media ul li {
display: inline-block;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
font-family: Helvetica;
font-size: 12px;
font-weight: 300;
letter-spacing: 2px;
margin-right: 40px;
}
.media ul li a{
text-decoration: none;
color: #fff;
}
.media ul li a:hover{
color: #ebcba7;
}

.header {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
font-family: first;
font-size: 40px;
letter-spacing: 3px;
text-shadow: 2px 2px 20px #000;
justify-content: center;
}
h1 span {
-webkit-text-stroke: 1px #000;
color: rgba(0,0,0,0);
}
.bottomnav {
position: absolute;
width: 45%;
height: 80px;
bottom: -40px;
background: #fff;
left: 50%;
transform: translate(-50%, -50%);
}
.bottomnav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 80px;
float: right;
}
.bottomnav ul li {
padding-right: 50px;
display: inline-block;
}
.bar {
position: absolute;
margin: 0;
background: rgba(0,0,0,0.3);
width: 50%;
height: 1px;
top: 50%;
left: 19%;
}
.counter {
position: absolute;
font-family: Poppins;
font-weight: bolder;
color: #000;
line-height: 80px;
padding-left: 50px;
}
.content {
height: 100%;
width: 100%;
background-color: #030000;
z-index: 0;
top: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

.content-wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.content-images {
width: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}

.content-image-wrapper {
height: 220px;
width: 150px;
text-align: center;
position: relative;
}

.content-image-wrapper img{
max-width: 100%;
width: 100%;
max-height: 100%;
height: 100%;
}

.one {
top: -10px;
}
.two {
top: -50px;
}
.three {
top: 20px;
}
.four {
top: -20px;
}

.content-image-wrapper h4 {
font-size: 1.8em;
position: relative;
top: -30px;
opacity: 0.6;
}

.text {
padding-top: 100px;
width: 60%;
font-size: 0.8em;
text-align: center;
}
.story
{
width: 100%;
height: 100%;
}

css

.media ul margin 0, yung sa .media ul li intentional ba yung margin-right: 40px mo?

Stranger1509 · Aug 12, 2019

asan ba jan sa css mo ung last div ano class name?

PHC Bor1s · Aug 12, 2019

Mr. Stark said:
.media ul margin 0, yung sa .media ul li intentional ba yung margin-right: 40px mo?

Yes intentional po siya sir. Para di nakasagat sa kanan yung mga buttons pang social media

PHC Bor1s · Aug 12, 2019

Mr. Stark said:
Margin ng body gawin mong 0.

Naka set na po sa 0,pati padding. Tinry ko na nga din set all using *

PHC Bor1s · Aug 12, 2019

Strike1509 said:
asan ba jan sa css mo ung last div ano class name?

.story po. Nasa pinaka baba ng css

PHC Bor1s · Aug 12, 2019

Hindi kaya sa pc na gamit ko lang? Kasi sa tropa ko ganto din problem niya e,magkaiba ginagawa naming project pero same problem. Same comp shop din kase kami gumawa. Malaki kase monitor dun e

Mr. Stark · Aug 12, 2019

PHC Bor1s said:
Naka set na po sa 0,pati padding. Tinry ko na nga din set all using *

.story display block mo.

Stranger1509 · Aug 12, 2019

PHC Bor1s said:
.story po. Nasa pinaka baba ng css

try mo meta viewport

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

check mo din mga closing tag mo, baka may dynamic tags ka na unclosed
pag ayaw yan ito pa try mo

HTML:

<div style="clear:both"></div>
<div class="story"></div>

🔒 Closed tulong sa mga batak sa web developing

Fanatic

Deleted member 622421

Fanatic

Fanatic

Deleted member 622421

𝕾𝖐𝖞 𝕳𝖎𝖌𝖍 𝕻𝖔𝖐é𝖒𝖔𝖓

Fanatic

Honorary Poster

Eternal Poster

Fanatic

Fanatic

Eternal Poster

Honorary Poster

Fanatic

Fanatic

Fanatic

Fanatic

Eternal Poster

Honorary Poster

Similar threads

About this Thread

Trending Topics

Online now

Forum statistics