What's new
Symbianize Forum

Most of our features and services are available only to members, so we encourage you to login or register a new account. Registration is free, fast and simple. You only need to provide a valid email. Being a member you'll gain access to all member forums and features, post a message to ask question or provide answer, and share or find resources related to mobile phones, tablets, computers, game consoles, and multimedia.

All that and more, so what are you waiting for, click the register button and join us now! Ito ang website na ginawa ng pinoy para sa pinoy!

[Help] Align Text in Header (links)

N

newbie1234567

Novice
Advanced Member
Messages
48
Reaction score
0
Points
26
View attachment 319793
mga sir, paano i align yung href sa header ko
Yung "Welcome" normal text lang tpos yung Sign In at Sign Up Href na sila
newbie lang sa html at css pls help.

<header>
<div class="header1">
<p class="Name">Welcome!!</p>
<span class="signIn"><a href="#">Sign In</a></span>
<span class="signUp"><a href="#">Sign Up</a></span>
</div>

</header>

eto yung codes ko, sa css wala pa po.

Edit: Gusto ko sana yung "Welcome" sa center;
"Sign In" sa left;
"Sign Up" sa right;
 

Attachments

  • headers.png
    headers.png
    51.8 KB · Views: 9
Last edited:
gamit ka bootsrap lagay mo lng sa class="pull-left" and class="pull-right" then absolute or <center> </centeR>
 
Gumawa sir, salamat. Kaso naka next line yung Sign In at Sign Up
Tapos hindi ko alam kung paano lagyan ng design yan gamit css. Sorry newbie lang po.
 
gamit ka boostrap then gamit ka div col para responsive yan
 
Sorry po, hindi ko gets, pwede po sample codes, gamit yung nilagay kong codes sa taas? Salamat po.

Edit: Pati sa CSS po.
 
alternatively you can use table with border 0
 
Ung div mag lagay k pa tatlong div saka mo lgyan ng width 33% tapos mag text align Ka na
 
Last edited:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#" style=" position: absolute;width: 100%;left: 0;text-align: center;margin:0 auto;">Welcome!!</a>
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Sign In</a></li>
</ul>

<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sing Up</a></li>
</ul>
</div>
</nav>


</body>
</html>

- - - Updated - - -

Copy Paste mo lng yan tapus pag aralan mo mabuti
 
hi po...try mo po ung flexbox....search mo na lang sa google kung paano..

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.header1 {
display: flex;
justify-content: center;
}
.Name {
margin: 0;
order: 1;
}
.signIn {
order: 0;
}
.signUp {
order: 2;
}
</style>
</head>
<body>
<header>
<div class="header1">
<p class="Name">Welcome!!</p>
<span class="signIn"><a href="#">Sign In</a></span>
<span class="signUp"><a href="#">Sign Up</a></span>
</div>
</header>
</body>
</html>
 
Suggestion ko lang:

Sana kapag may nagpost ng help request na ganito, as much as possible turuan nyo sya ng mas malapit sa current na ginagamit nya. Like for example, nakita nyo na custom css ang ginagamit nya, bakit nyo papagamitin agad ng bootstrap? Bakit hindi nyo bigyan ng sample solution na:

Code: 
.signIn{ float: left; }
.signUp{ float: right; }

Kung hindi pa sya maalam sa css framework (bootstrap) hindi ba mas madali para sa kanya yan ganyan solution? Ni hindi nyo nyo nga binigyan ng sample solution sa bootstrap eh, basta sinabi nyo na lang na gumamit ng bootstrap, tapos bahala na sya.
 
Last edited:
Thank you po sa mga tumulong, kaso mas madali yung kay sir jskhulitz. Gets ko agad salamat po!

- - - Updated - - -

Mga sir: May tanong pa po ako,View attachment 319858
gusto ko sana pag niliitan yung browser, magsisiksikan yung mga text sa gilid, paano po yun? salamat
 

Attachments

  • head.png
    head.png
    74.6 KB · Views: 3
newbie1234567 said:
Thank you po sa mga tumulong, kaso mas madali yung kay sir jskhulitz. Gets ko agad salamat po!

- - - Updated - - -

Mga sir: May tanong pa po ako,View attachment 1212353
gusto ko sana pag niliitan yung browser, magsisiksikan yung mga text sa gilid, paano po yun? salamat
Click to expand...

Hi sir..gamit ka po ng media query..part sya ng css3.. Ganto po sya..

//pag ang screen ay 0-480px tapos lagay mo sa loob ang css rule na gusto mo
@media only screen and (max-width: 480px) {
.header1 {
float: right;
}
body {
background: blue;
}
}

sa browser inspect element mo..tapos drag..pag na hit mo ung 480px..ma aapply na ung css rule mo..salamat
 
newbie1234567 said:
Di ko po kasi gets sorry po, kasi newbie lang po ako, kung may sample ka po pwede ko i try. Salamat
Click to expand...

Code: 
<div class="header1" style="border:1px solid blue;width:100%"> 
<div style="border:1px solid red;width:32%;text-align:left;display:inline-block;">
<p class="Name">Welcome!!</p>
</div>
<div style="border:1px solid black;width:32%;text-align:center;display:inline-block;">
<span class="signIn"><a href="#">Sign In</a></span>
</div>
<div style="border:1px solid grey;width:32%;text-align:right;display:inline-block;">
<span class="signUp"><a href="#">Sign Up</a></span>
</div>
</div>

yan lang solution ko ngaun. naglagay p ako ng border para mkita mo panu behavior ng div pag collapse
d ko alam bakit ayaw ng 33 biglang bumababa ung isang div di tlga ako front end :lmao:

nagets ko na dahil pala sa border 1px :upset:
 
Last edited:
King James Harden Jr said:
Code: 
<div class="header1" style="border:1px solid blue;width:100%"> 
<div style="border:1px solid red;width:32%;text-align:left;display:inline-block;">
<p class="Name">Welcome!!</p>
</div>
<div style="border:1px solid black;width:32%;text-align:center;display:inline-block;">
<span class="signIn"><a href="#">Sign In</a></span>
</div>
<div style="border:1px solid grey;width:32%;text-align:right;display:inline-block;">
<span class="signUp"><a href="#">Sign Up</a></span>
</div>
</div>

yan lang solution ko ngaun. naglagay p ako ng border para mkita mo panu behavior ng div pag collapse
d ko alam bakit ayaw ng 33 biglang bumababa ung isang div di tlga ako front end :lmao:

nagets ko na dahil pala sa border 1px :upset:
Click to expand...

okay na salamat sir! hehe
may question pa ako, sa background naman.
Gusto ko kasi yung 1/4 ng background e image tapos yung sa ilalim nun e color na? hindi ko magawa, nag zu-zoom yung image ko

- - - Updated - - -

tsaka, naglagay ako ng image sa jumbotron, dapat pag niliitan yung browser liliit din siya or responsive, sorry dami tanong newbie lang sa pagdesign ng website

edit: //codes css sa image
.image {
margin-top: 0px;
margin-left: 250px;
width: 600px;
height: 170px;
}
@media only screen and (max-width: 480px) {
.image {
float: right;
}
}
 
Last edited:
You must log in or register to reply here.

Similar threads

ghraven
Full Web Development Resources [begginer to Pro] 1st Part
2
Replies
26
Views
6K
kimhill
kimhill
C
[HELP] Windows can't sign in
Replies
3
Views
457
chazzy
C
walo
Web Design for Web Developers: Build Beautiful Websites!
Replies
2
Views
935
xkuku
xkuku
Yolo-Legend
Watch-To-Earn $RPLAY on Rewarded TV for FREE!!!
2
Replies
21
Views
3K
Yolo-Legend
Yolo-Legend
ghraven
Full Web Development Resources [begginer to Pro] Second Part
Replies
10
Views
3K
islawpalitaw
islawpalitaw
Back
Top Bottom