I have navbar with some <li> at it.
Here is my HTML and CSS code:
<nav class="navbar navbar-default navbar-fixed-top navbar-centered" role="navigation">
<div class="container" style="position: relative">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="~/Images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#services">Benefits</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
I need to add there two <li>, but it need to be at right of navbar.
Something like this:
How I can do this?
<nav class="navbar navbar-default navbar-fixed-top navbar-centered" role="navigation">
<div class="container" style="position: relative">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="~/Images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="float:left">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#services">Benefits</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
<ul style="float:right">
<li><a>Try it Risk free</a></li>
<li><a>login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
You can add another <ul> element with navbar-right class to it
<nav class="navbar navbar-default navbar-fixed-top navbar-centered" role="navigation">
<div class="container" style="position: relative">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="~/Images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#services">Benefits</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
//this is the nav elments towards right
<ul class="nav navbar-nav navbar-right">
<li>Right Link1</li>
<li>Right Link 2</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
You can use display flex on the Nav
CSS
ul.nav{
display:flex;
align-items: flex-start;
}
ul.nav li.right{
align-self: flex-end;
color: red;
border: 2px solid red;
}
HTML
ul.nav
li*3 // normal links
li.right*2 // sign up links
Related
In bootstrap I want to create a page header which consists of a static header, a navbar in a second row and a profile picture to the right, like this:
The profile picture should be of fixed size, the title and nav bars should have the same size each and should fill the screen width.
Problem is, I got no clue how to achieve this in css, especially sind it needs to embed a bootstrap navbar. My only idea would be an old-fashioned 2x2 table where the picture spans two rows, but tables are not meant for layout problems, so sure there must be some better way in css?
To show full effect Watch full-screen view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="">
<div class="row">
<div class="col-md-11">
<nav class="navbar navbar-default navbar-fixed-top" style="border-radius: 5px 5px 0px 0px; border-bottom: none; border-right: 1px solid #e7e7e7; width: 91.5%">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default" style="margin-top: 50px; border-radius: 0px 0px 5px 5px; border-top: none">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li >
<a href="#">Link
<span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
<li role="separator" class="divider"></li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div> <div class="col-md-1">
<div style="background-color: #f0f0f0; margin-left: -30px; padding-left: 10px; position: fixed">
<img src="https://cdn4.iconfinder.com/data/icons/dragon/512/User.png" alt="" class="" style="width:100px; margin-left: 10px ">
</div>
</div>
</div>
<!--/.row-->
<div style="height: 100vh;"></div>
</div>
<!--/.container-fluid-->
Use bootstrat 3's media styling
In this snippet I used only 1 embedded BS Nav and added a border color to delineate the media objects
ALSO - Bootstrap navs are responsive so when you run the snippet switch to expanded view
.media {
border: 1px solid gray;
}
.media, .media-body {
overflow: visible !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<nav>Nav</nav>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<nav>Nav</nav>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
</div>
</div>
I am trying to center:
<div style="text-align:center; margin-top:16px;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
I want it to be centered above the div below it at all times.
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Ideas
</li>
<li>
Contact
</li>
</ul>
</div>
Unfortunately I can't quite figure out how to make it center above the div properly.
Desired output would kinda look like:
Full Header Code for Ref:
<header class="item header margin-top-0 padding-bottom-70" id="header1">
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-default navbar-lg navbar-fixed-top" role="navigation">
<div class="container">
<div class="col-lg-1">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse-02" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand brand" href="#">
<img src="images/new-logo-small.png">
</a>
<div class="hidden-xs"> A+ Rating BBB</div>
</div>
</div>
<div class="col-lg-6">
<div style="padding-top:67px; padding-left:125px; text-align:center; font-size:16px" class="hidden-md hidden-sm hidden-xs">
<div>
<div>Some Address</div>
<span class="fa fa-envelope"></span><span> <a style="text-decoration:none; color:#333">email#email.com</a> | </span>
<span class="fa fa-phone"></span><span> (727) 876-5309</span>
</div>
</div>
</div>
<div class="col-lg-5">
<!-- I want this to stay centered above the div below it -->
<div style="text-align:center; margin-top:16px;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Ideas
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="container" style="width: 1000px">
<div style="text-align:center; margin-top:16px; display: block; margin: 0 auto;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Ideas
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
I use percentage in a margin to center navbar and navbarnav. I hope that this help you.
<div class="makenavbarcenter">
<div class="hidden-xs headertitle">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<nav class="navbar navbar-default navbarmain">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav makenavbarnavcenter">
<li class="headerlinks">Home
</li>
<li class="headerlinks">Services
</li>
<li class="headerlinks">About Us
</li>
<li class="headerlinks">Ideas
</li>
<li class="headerlinks">Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<style type="text/css">
.makenavbarcenter {
margin-left: 20%;
margin-right: 20%;
}
.navbarmain {
background-color: transparent;
border-color: transparent;
}
.makenavbarnavcenter {
margin-right: 20%;
margin-left: 20%
}
.headertitle {
text-align: center;
margin-top: 16px;
}
.headerlinks {
padding: 0px;
margin: 0px;
}
</style>
For some reason I cannot get the navbar to change. I tried to make it transparent. I know bootstrap navbar is normally an image so I included background-image: none.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand page-scroll" href="#intro">Eric West</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
Don't remove .navbar-inverse (or .navbar-default) unless you plan on adding some custom CSS to make up for it because these add properties to the nav, in particular to the navbar-toggle class.
Without one of those you'll remove alot of CSS from your nav and the navbar-toggle will not be visible on a device under 768px, it will be there and actionable but you won't be able to see it.
I would add a custom nav class and use that to override the property you need to change.
See example with that includes one with and one without the additional property.
body,
html {
background: grey;
margin-top: 50px;
}
.navbar.navbar-custom {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand page-scroll" href="#intro">Custom Navbar</a>
</div>
<div class="collapse navbar-collapse navbar-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand page-scroll" href="#intro">Navbar Only</a>
</div>
<div class="collapse navbar-collapse navbar-2">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Not sure if it is a typo on your end, but you need to add a . to target the navbar class in css like so:
.navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
As mentioned by #Benya16, the navbar-inverse class modifies the base attributes of the navbar, you can read about that in the docs here. If you remove that bootstrap attribute it will be the bootstrap default.
Bootstraps Navbar is defined by its CSS file. To change the color, simply do.navbar-default:background-color: transparent !important although !important is not best practise, you can always change the color in the Bootstrap.css file.
Bootstrap.css - line 4594 to find the .navbar-inverse background color.
do ctrl-f and type navbar-defualt to find that one too.
I am trying to make a fixed bottom navbar that will slide up when it is collapsed. As far as I can tell i have it set up right, but when I click the collapse button nothing happens.
here is my html:
<nav class="navbar navbar-inverse navbar-fixed-bottom " role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll animated infinite pulse" href="#page-top"><img src='assets/images/logo.png'></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" href="#troposphere">TROPOSHPERE</a>
</li>
<li>
<a class="page-scroll" href="#stratosphere">STRATOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#mesosphere">MESOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#thermosphere">THERMOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#exosphere">EXOSPHERE</a>
</li>
</ul>
</div>
</div>
</nav>
I'd love some help if you can see what I've done wrong.
I am trying to make the picture 100% but it wont work.
Code:
html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
css:
.headerimg {
width: 50%;
height: 100px; }
It would be very helpful if anyone can help. I am usually able to do it but for some reason I am unable to do it this time. Thanks again for your help.
Just change CSS to:
.headerimg
{
width: 50%;
height: 100px;
}
img {
width: 100%;
}
It will make Image 100% in width.
look this : http://jsfiddle.net/cadh3vv9/
try the follow code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img style="width=50%" src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
I styled the image to 50% width you also want it to be 100 px height well thats wrong, its something like telling the browser show a pic of a roadkilled dog, you must define what you preffer, width or height because image resize uses one of these values to resize correct