I want to add my clickable company logo to the header, which will redirect them to homepage. I tried this, but it makes the whole header clickable.
<div id="header">
<a style="display:block" href="profile.php" >
<label>
<img src="images/logo.png" height="50x" width="180px" />
</label>
</a>
</div>
I have added the CSS associated with it:
div#header a
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
Use CSS.
Don't use INLINE CSS STYLE. Instead create css file and paste code and include it in page.
<style type="text/css">
div.header
{
display: block;
height: 40px;
position: absolute;
width: 100%;
}
div#header a img
{
cursor:pointer;
}
.header .logo
{
display: block;
float: left;
padding: 4px 3px;
}
img
{
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
}
</style>
<div class="header">
<a href="action.php" class="logo">
<img title="Title" alt="Alter" src="img/4.png">
</a>
</div>
Please remove display: block from anchor :-
<div id="header">
<a href="profile.php" ><label><img src="images/logo.png" height="50x" width="180px" /></label></a>
</div>
try this
</style>
div#header
{
position:fixed;
height:40px;margin:0;width:100%;
padding-left:30px;background: #00BFFF
}
</style>
<div id="header">
<a s href="profile.php" > <img src="slider-button-left.png" height="50x" width="180px" /></a>
</div>
Related
I am pretty bad with css, so I was wondering how I can keep my sidebar full height, even though it doesnt have full content.
This is my css:
#wrapper {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
#wrapper .sideBar {
background-color: green;
width: 200px;
margin-left: 10px;
overflow-x: hidden;
padding-top: 20px;
}
#wrapper .productsBox{
width: 250px;
margin: 3px;
}
But I get this result
However I want a result that looks like this:
Any idea how I can fix this? And I want to have a responsive view, so when a user use phone to browse it displays a decent view. Thats the reason I use the wrapper.
html:
<div id="wrapper">
<form method="get" id="sortForm">
#Html.DropDownList("sort", new SelectList(ViewBag.sortOptions,"Value","Text"), new {#class="form-control", onchange = "sortingChanged()" })
<div class="sideBar">
<strong>Search for products</strong>
<input type="text" class="searchBar" name="SearchString" value="#ViewData["CurrentFilter"]" placeholder="Search.."/>
<hr />
<h6>Price</h6>
<div>
<input type="number" class="priceRangeInput" name="minPrice" value="#ViewData["MinPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Min</span>
</div>
<div>
<input type="number" class="priceRangeInput" name="maxPrice" value="#ViewData["MaxPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Max</span>
</div>
<br />
<hr>
<h6>Types</h6>
<button type="submit" class="btn customGreen" >Set filters</button>
</form>
<br />
</div>
#{
foreach(var p in #Model)
{
<div class="productsBox">
<div class="card">
<a asp-action="Details" asp-route-id="#p.Id">
<img alt="#p.Name" class="contain" src="#p.FilePath" height="300" style="width: 100%;" />
</a>
<h3>#p.Name</h3>
<p class="price">#p.Price kr/#p.Unit</p>
<a asp-action="Details" asp-route-id="#p.Id">
<button class="customGreen">See more</button>
</a>
</div>
</div>
}
}
</div>
html, body {
height: 100%
}
html,
body {
height: 100%; /* to set height to 100% */
}
body {
margin: 0; /* to remove default margins */
}
#wrapper {
height: 100%; /* to set height to 100% */
}
#wrapper {
display: flex;
background-color: yellow;
}
.sideBar {
background-color: #000;
width: 200px;
color: #fff;
overflow-x: hidden;
padding-top: 20px;
}
.product-wrapper {
width: calc(100% - 200px); /* 100% - (sidebar width) */
}
.productsBox {
display: inline-block;
width: 150px;
height: 150px;
color: #fff;
margin: 3px;
background: #2f910f;
}
<html>
<body>
<div id="wrapper">
<div class="sideBar">
Sidebar
</div>
<div class="product-wrapper">
<div class="productsBox">
Item
</div>
</div>
</div>
</body>
</html>
You should take .sideBar out of the #wrapper container and apply width: calc(100% - 210px) to #wrapper (i.e. the width of the container/window minus sidebar minus its left margin). That way both together will be 100% wide, but the contents of #wrapper will not go under the sidebar.
you should add side bar and another containts in different divs and add this code to it:
.wrapper{
display:flex;
flex-direction:row;
}
.sidebar{
background-color:red;
width:50%;
}
.containts{
width:50%;
background-color:green;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="containts">
containts
</div>
</div>
Add the following code in css it worked for me
height: 100%;
I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
I have this html css so far
<html><head><style type="text/css">
.img_list {
width: 50px;
height: 50px;
position: relative;
}
#img_list .icon {
width: 30px;
height: 30px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
li{
list-style:none;
}
</style></head>
<body>
<ul id="img_list">
<li>
<img src="images.jpg" alt="Image Title" class="img_list" />
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Chaplin</a>
</li>
<li>
<img src="images.jpg" alt="Image Title" class="img_list"/>
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Bean</a>
</li>
</ul>
</body>
</html>
this is the rendered image
![enter image description here][1]
what i wanted was to have the down arrow image to overlay on top of the image itself at the bottom right of each image.
i tried playing with top, bottom, right left but its not consistent with browsers size.
how do i change my css to have this work correctly.
Simply add position: relative; to the list items.
li {
list-style:none;
position: relative;
}
You're getting that result because you are positioning the icon relative to the container, #img_list. Try adding position:relative; to your li css definitions, and removing it from the #img_list{ definitions:
li{
list-style:none;
position:relative;
}
See this live Demo (with replacement images): http://jsfiddle.net/wm4rj/
try this one:
<html>
<head>
<style type="text/css">
#img_list li {
list-style:none;
position:relative;
line-height:50px;
}
#img_list li .img_list {
width: 50px;
height: 50px;
}
#img_list li .icon {
width: 30px;
height: 30px;
position: absolute;
z-index: 99;
bottom: 20px;
left:0;
}
</style>
</head>
<body>
<ul id="img_list">
<li>
<img src="images.jpg" alt="Image Title" class="img_list" />
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Chaplin</a>
</li>
<li>
<img src="images.jpg" alt="Image Title" class="img_list"/>
<img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
<a>Charlie Bean</a>
</li>
</ul>
</body>
</html>
My aim is to place 3 images in one row with the same distance from each other, as it is shown in the picture below (assuming the 2 arrows have the same length).
By now my solution is a very ugly one, which breaks, if the window size is too small:
<h1>
<div style="width:105px; height:30px; float:left; margin-top:25px;">
<img src="image1.png"/>
</div>
<div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
<img src="image2.png"/>
</div>
<div style="width:102px; height:30px; float:right; margin-top:25px;">
<img src="image3.png"/>
</div>
<div style="clear: both;">
</div>
</h1>
I would really prefer a "clean" solution, but my HTML knowledge about positioning is too limited so far.
Any help would be appreciated.
Use text-align: justify:
<div class="outer">
<img src="http://placehold.it/50x100" />
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/50x100" />
<span class="fix"></span>
</div>
.outer {
text-align: justify;
}
.outer img {
display: inline-block;
vertical-align: center;
}
.outer .fix {
width: 100%;
height: 0;
display: inline-block;
}
In most browsers, you can remove that .fix span, and add:
.outer::after {
width: 100%;
height: 0;
display: inline-block;
content: "";
}
I have an image and a hyperlink inside a div, but for some reason, the hyperlink is not center aligned with the image.
Here's my CSS
#loginb {
margin-top: 40px;
height: 50px;
left: -438px;
float:right;
position: relative;
display:block;
}
#loginb img {
padding-top: 10px;
}
#loginb a {
color: #fff;
line-height: 10px;
}
and here's the html
<div id="loginb">
<img src="icon.png" alt="login" />
Login
</div>
see this, hope you will find your solution.
<div>
<img style="width:50px;height:50px;vertical-align:middle" alt="vertical image">
<span style="color:red;">Check it.</span>
</div>