I am learning HTML and CSS. But this thing is getting on my nerves. I have tried everything to solve this thing but unable to do so. I am practicing with a sample website.
Main issue i Am trying to apply this logo which I marked under a rectangle above two ".divs". Sorry I am newbie and don't know how to properly. I am attaching my coding below of css.
I need to put those two divs below this image.
I am newbie so don't know how to paste code. This thing is new for. please any help would be appreciated. enter link description here
Okay, Well its hard to see without the images actually being included on the codepen.
I've gone through your code and eliminated the syntax errors/spelling mistakes etc and made it abit cleaner, so hopefully it will work for you, if not if you can provide images on the codepen it would make it alot easier.
HTML:
<body>
<div class="image">
</div>
<div id="wrapper">
<header>
<div class="headerbox1"></div>
</header>
<div class="banner">
<div class="headerbox2"></div>
</div>
</div>
</body>
</html>
CSS:
body {
background:#BCBCBC;
}
#wrapper {
height:2278px;
width:1600px;
background:#ABFF7E;
margin: 0 auto;
}
header{
width:1600px;
height:57px;
background:#FF1D21;
margin: 0 auto;
}
.headerbox1{
width:1600px;
height:57px;
background:#EDE8E9;
margin: 0 auto;
}
}
.banner{
width:1600px;
height:559px;
background:url(../../Images/alpha.jpg);
}
.headerbox2{
width:1600px;
height:63px;
background:rgba(0,0,0,0.4);
margin: 0 auto;
}
.image {
width:219px;
height:185px;
background:url(../../Images/logo%20spotless.png);
display: inline-block;
margin: 0 auto;
}
I could see no relevant reason for you to use the <td> tags in your html, especially as you don't have a table in there, so i have took them out.
Hope this helps, If not your need to provide images aswell.
Related
I've searched on a lot of topics and I didn't found the solution...
I'm just trying to scale my image to fit into my div but it isn't.
HTML :
<div class="slideshow-image slideshow-active">
<img src="assets/images/securityBreach1.png">
</div>
CSS :
.slideshow-image {
text-align: center;
display: none;
overflow: hidden;
margin: 0 auto;
}
I've already tried to play with max-width/height, width/height and object-fit:content but nothing seems work.
Here's the website page if you want (see the slideshow part) :
Thank you in advance !
Have you tried adding the following?
.slideshow-image img{
width:100%;
height:auto;
}
Does that help?
anyone know how to solve this problem:
The image of the example overboard the image-wrapper that contain it.
It works correctly if it's smaller or change "max-height:40vw" to "height:40vw", but both solutions are bad for me.
What I'm trying it's to get that image responsive in different resolutions ( desktop to laptop, for mobile I have a different design ), like here: http://goo.gl/yRo5OE (deviantart)
The website where I'm trying to implement: http://goo.gl/AAF4U7
Thank you, if you have another solution for this please tell me.
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
height:100%;
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
just remove the height:100% from css
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
Please see if the following helps-
img{max-width:100%; width:auto; vertical-align: top;}
OR
http://jsbin.com/guwicolora/edit?output
I am wondering if any of you have any tricks to make this happen, or if I'm completely overthinking this.
I have MANY images being used and the most efficient (and easiest) way to make these images show up is to use the CSS background:url("link"); property where link is the proper link to my image file. This prevents cluttering of my html files as well.
The issue is that the above code is found in over 50 different ids, each pointing to a different image and I need to resize the images, however I would REALLY like to not have to put the following code under each and every id.
background-size:180px 239px;
background-repeat:no-repeat;
To put this simply:
I have CSS that looks something like this...
My "ID"s
#image1
{
background:url("../Images/image1.png");
}
#image2
{
background:url("../Images/image2.png");
}
#image3
{
background:url("../Images/image3.png");
}
My class
.myClass
{
width:180px;
height:239px;
background-size:180px 239px;
background-repeat:no-repeat;
}
Note that by entering this code all will seem normal, however if you change the values in background-size (say to 100px 239px you will notice the issue that I am experiencing)
And a typical use of this in html would be as the following:
<div id="image1" class="myClass"></div>
A jsfiddle of this issue can be found here: jsfiddle
The anticipated result is shown under the text in the fiddle.
How would I go about coding this so that it remains clean?
I would like to note that I am trying to keep my CSS and JS separate. I am looking for a purely CSS way for coding this. I need control of all the id's background-properties from one single location.
Any help with this is greatly appreciated, thank you.
Change background to background-image and it will work :)
#image1
{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Bolognese_Image.jpg/180px-Bolognese_Image.jpg");
}
#image2
{
background-image:url("http://www.phy.duke.edu/~kolena/Recommended.gif");
}
.myClass
{
width:180px;
height:239px;
background-size:100px 239px;
background-repeat:no-repeat;
border:2px solid red;
}
/*------------------------------------*/
#thisIsWhatIWantItToLookLike
{
background-image:url("http://www.senoja.nl/images/mainecoons/galleryxamina/xamina1.jpg");
background-size:100px 239px;
background-repeat:no-repeat;
}
.mySadClass
{
width:180px;
height:239px;
border:2px solid blue;
}
<div id="image1" class="myClass"></div>
<div id="image2" class="myClass"></div>
<p>This above images should show up like the one below does, squished</p>
<div id="thisIsWhatIWantItToLookLike" class="mySadClass"></div>
background-size: 100px 239px !important;
background-repeat: no-repeat !Important;
Add these two properties to your class
DEMO
Ok, so I'm brand new here (and to programming) and I'm not even sure If the questions I'm going to ask is worded correctly or makes sense, but here it goes.
I am working on a bootstrap theme for a client, I am trying to change the background colors. I do not want the page to be all the same background color. I would like certain rows to have a different background color from the rest of the page. How can I accomplish this? I've tried adding unique tags to the containers I'm working on with the background color I want, but no matter what I do NOTHING is changing. I know this is something simple and I just need a simple explanation as to how to make this work! HELP!
You have some options to do that.
For the background in the divs:
You can do:
<head>
<style>
body{
background-color: red;
}
.backg1{
background-color: blue;
width: 100%;
padding: 10px;}
.content{
background-color: white;
margin: 10px;
width: 80%;
height: 100px;}
</style>
</head>
<body>
<div class="backg1">
<div class="content">
</div>
</div>
</body>
Is only work with the css properties. You need paste the code to try help you.
Add class="bgColor"
Like:
<div class="bgColor">
....
</div>
Your css:
.bgColor{
background: #dadada;
}
Give all your styles in custom_style.css, in which you can add CSS properties for elements. Inside your custom_style.css you give background color you want.That's it, Its just the work of CSS. No other process or procedure to .
consider #Page 1
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_home">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Consider #page 2
/* Include Bootstrap.css and custom_style.css etc */
<body>
<div class="container">
<div id="Web_page_about">
.............
</div>
</div>
/* include JQuery.js and Bootstrap.js */
Here goes the working of CSS "Custom_style.css" has
#Web_page_home { background-color:red; }
#Web_page_about{ background-color:green; }
The output will b the Page 1 backgorund will b in red and another page 2 will be in green.
if you didn't understand still i will attach fiddle.
I'm new to web designing.
I started to designing a sample page but I have some challenges.
I have photoshop template like below image.
to convert it to HTML and CSS I fallowed these steps :
I separated background image with logo then I putted to background of body
I created main DIV as page container with relative position.
now I want to put texts to page ( OH BOY WE'RE LOST !) and ( THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR
TEMPORARILY UNAVAILABLE.)
I have some questions here :
How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
How should I position them to having same position in picture and web site ? is there any specific technique exist ? or should I do i with test and try ?
Please explain me.
Fix the width width:100% of the page div. and give <h1> tag for "OH BOY WE'RE LOST!" with specified width and margin: 0 auto;.
and <p> tag for remaining text that "HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE."
<div class="page">
<h1>OH BOY WE'RE LOST!</h1>
<p>HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</p>
</div>
css :
.page {
position:relative;
width:100%;
height:auto;
}
.page h1 {
position:absolute;
top:0px;
left:0px;
font-size: /*your font size*/
font-family: /*your font family*/
width:100px; /*you can change the width as per your need*/
margin:0 auto;
}
.page p {
width:98%;
margin:0 auto;
}
How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
Both of them in seperate div and enclosing them in the background image div. I personally prefer span than div because it is plain text.
<div class="backGroundImag">
<span class="text1"> Text goes here </span>
<span class="text2"> Text goes here </span>
</div>
You need to keep in mind the web is not a pixel perfect medium as there are so many variables in play: different browsers, operating systems, screen resolutions etc.
If you are new to web designing, start with something a little more simple. What you have there is a great design that may not immediately translate easily to the web (your search box for a start would provide some interesting implementation challenges).
Don't aim too high early on. Read, practice, repeat. Here is a good article on centered design techniques to get you started:
http://www.webdesignforidiots.net/2009/03/fixed-width-centered-website/
Marked as CW because this is advice and not an answer!
body { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; }
.wrapper { width:600px; margin:0px auto; background:url(images/bg.jpg) no-repeat; min-height:437px; }
.header { width:144px; margin:0px auto; padding: 25px 0 20px 0; height:130px; } /*If you want logo Seperatly use this step*/
.header h1 { margin:0px; padding:0px; } /*For Seo prupose*/
.content { margin:0px auto; padding:0px; width:480px; }
.content h1 { text-align:center; text-transform:uppercase; font-size:16px; margin:0px; padding:0px;}
.content h2 { font-size:12px; }
HTML
<div class="wrapper">
<div class="header"><h1><!--<img src="images/logo.png" alt="logo" />-->Logo</h1></div>
<div class="content">
<h1>OH BOY WE'RE LOST !</h1>
<h2>THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</h2>
</div>
</div>