I am trying to combine a profile picture with text (title) on my tumblr theme.
I have problems with the alignment. I also need it to be good in responsive view. (If title gets to big, it should fall under - made a picture to illustrate.
css
#header .user-portrait {
border-radius: 100%;
width: 40px;
height: 40px;
margin-right: 18px;
display: inline-block;
vertical-align: middle;
float: left;
}
#header a {
font-weight: bold;
display: block;
margin-bottom: 34px;
vertical-align: top;
}
#description {
color: {color:Description};
padding-right: {text:Minus width for header in px}px;
}
#page-masthead ul {
margin: 0;
list-style-type: none;
display: block;
clear: both;
line-height: 1.92em;
padding-right: {text:Minus width for header in px}px;
}
html:
<div id="page-masthead">
<div id="header">
<img src="{PortraitURL-40}" alt="" class="user-portrait">
{block:IfShowblogtitle}
{Title}
{/block:IfShowblogtitle}
</div>
The best way is when the width is small enough use a media query as follows;
#media only screen and (max-width: ??px) {
#header .user-portrait {
float: none;
margin: 0 auto /* To center the "span" or whatever you're using */
}
}
Related
Okay, I found a solution: with #media I'm accessing the image's width and the bar separately and it's working but is there any shorter way codewise?
I searched the internet for a solution but none of what I found helped me so far.
I'm trying to make my header to be responsive to the browser's width but it isn't working.
I tried to make just the image responsive or just the top bar but nothing works...
Any ideas?
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/>
</div>
</header>
and this is the css:
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
width: 100%;
text-align: center;
}
Try to change it into:
#media screen and (max-width:900px) {
.header {
width: 100vw; /* viewport width */
}
}
device-width is not correct value for width.
Use : <
meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
When you are working om Media Queries, You have to need change inherit property if you declare cascaded down.If you have set Backgruond images on the body, there is need a queries to cancel background images.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
It's not really clear what you want, but to get your image span the whole width in all sizes, you can add this rule:
.banner img {
width: 100%;
}
This will size the image within its container (which has 100% width, so eventually the image will span the width).
BTW: .banner is a DIV that will be 100% wide anyway, so you actually can erase the 100% width for .banner
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
}
.banner img {
width: 100%;
}
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" />
</div>
</header>
I'm facing issue for responsiveness using DreamWeaver 2017.
The CSS for the logo :
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
Upon trying out the responsiveness :
I'm aware i'm using margin left which caused it.
The objective is to adapt both site and mobile site like this :
Also, if you observed even the input box also indent to the right..
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
I'm looking on other method than padding or margin.
Any critic/suggestion is welcome.
HTML codes:
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo"/>
<font color="black" class="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder="Quick Search for any city or
street in Japan" style="border:none;"/>
</div>
</div>
</header>
Codepenio : https://codepen.io/jayvicious/pen/xrxbZz
There is a lot going on here that we can look at. One thing others have commented on is that your HTML needs cleaned up. Make sure that IDs are truly unique, and that each opening tag has a closing tag (except for self-contained elements, like images and inputs).
You could also stand to use some wrapping elements to help you contain the main areas of your header: the logo, the nav items, and the search.
From there, to help with responsiveness, I would recommend using percentages for your widths whenever possible, instead of absolute units like centimeters. This will help your display flex a little bit at bigger screen sizes. At some point, though, you'll need to just redo the layout because the screen will be too wide to fit all your elements in one line. That's where media queries come into play.
Media queries will let you override a base style when the screen is smaller (or larger) than a certain width. For example, we could set the body to be blue normally, then change to red on smaller screens:
body {
background-color: blue;
}
#media all and (max-width: 800px) {
body {
background-color: red;
}
}
Another thing we can do to tidy things up and make our life easier is to use classes when possible. The nav items are a good use case for this: most of their styles will be shared. We can give them each an ID just in case, but we may not even need to use all those IDs.
Edit: Another tidying opportunity I meant to mention is that the use of the <font> tag is deprecated as of HTML5, so you should avoid that in your HTML. I removed it from the HTML in my snippet below. (End edit.)
A final thing you can do is make the little triangles next to the nav items with HTML and CSS instead of as images. (You could also do these purely in CSS using pseudo elements.)
Here is a demo where I've cleaned up your HTML quite a bit and then heavily revised the CSS to look more like what's in the pictures you provided. I have used placeholder images with my best guess at their real sizes based on the picture. You'll see that as you resize the screen, the media queries kick in to make the header get taller and to center things in the middle of the screen.
I've also forked your Pen on CodePen.
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
body {
margin: 0;
}
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
background-color: #73A7D1;
font-size: 14px;
font-style: normal;
font-weight: 400;
width: 100%;
height: 80px;
}
#header-wrapper {
width: 80%;
margin: 0 10%;
padding-top: 15px;
}
#logo, nav, #search {
float: left;
}
#logo {
width: 110px;
height: 50px;
}
nav {
width: 60%;
}
#search {
width: 200px;
}
.menu-item {
display: inline-block;
margin: 0 2.5%;
height: 30px;
color: black;
max-width: 100px; /* forces "sign in/register to break at <wbr> tab */
text-align: center;
}
#menu2 {
position: relative; /* bump "sign in/register" down a bit */
top: 7px;
}
.triangle-down { /* dropdown arrows next to nav links */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
display: block;
float: right;
margin-top: 5px;
margin-left: 3px;
}
#search img, #search input {
float: left;
height: 30px;
}
#search img {
margin-right: 5px;
}
#search input {
width: 150px;
}
#media all and (max-width: 980px) {
header {
height: 160px;
}
#logo, nav, #search {
float: none;
margin: 0 auto;
}
nav {
width: 100%;
text-align: center;
}
}
#media all and (max-width: 550px) {
header {
height: 200px;
}
}
<header>
<div id="header-wrapper">
<div id="logo"><img src="http://placehold.it/110x50" alt="sojologo"></div>
<nav>
<div class="menu-item" id="menu1">ABOUT<span class="triangle-down"></span></div>
<div class="menu-item" id="menu2">SIGN IN/<wbr>REGISTER</div>
<div class="menu-item" id="menu3">PROMOTIONS</div>
<div class="menu-item" id="menu4">TRAVEL<span class="triangle-down"></span></div>
</nav>
<div id="search">
<img src="http://placehold.it/30x30"/>
<input placeholder="Quick Search for any city or street in Japan" />
</div>
</div>
</header>
well FreedomPride
you can specify different properties for every class in each size of screens
you can use media query in this situation.
for example :
#media only screen and (max-width: 480px) {
.menu2 {
margin-left:20px;
}
}
as you see here I changed the margin in small screens 480px wide to 20px
and you can use it for each size
320px
480px
720px
1200px
you may get more information for mediaquery from here :
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
here's example of how we can do it :
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
/*header*/
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-style: normal;
font-weight: 400;
}
#menu1 {
display: inline-block;
margin-left: 3cm;
margin-right: auto;
height: 30px;
}
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
/* Logo placeholder*/
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#logodropdown {
margin-left: 0px;
border: none;
background-color: rgba(255,255,255,1.00);
}
/* div for Links in header */
#headerLinks {
float: left;
width: calc( 100% - 139px );
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(255,255,255,1.00);
}
/* Links in header */
#imgContainer{
float:left;
}
#headerLinks a {
text-decoration: none;
color: rgba(146,146,146,1.00);
padding-left: 66px;
font-size: 14px;
}
/* Offer text banner*/
#offer {
font-family: 'Montserrat', sans-serif;
clear: both;
background-color: rgba(246,246,246,1.00);
color: rgba(146,146,146,1.00);
padding-top: 57px;
padding-bottom: 57px;
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1280px) {
#logo {
margin-left:30px;
}
#menu1 {
margin-left:35px;
}
.menu2 {
margin-left:20px;
}
.menu2 input {
max-width:300px;
}
}
#media only screen and (max-width: 992px) {
#logo {
margin-left:25px;
}
#menu1 {
margin-left:25px;
font-size:18px;
}
.menu2 {
margin-left:15px;
font-size:14px;
}
.menu2 input {
max-width:250px;
font-size:11px;
}
#media only screen and (max-width: 720px) {
#logo {
margin-left:10px;
}
#menu1 {
margin-left:10px;
font-size:13px;
}
.menu2 {
margin-left:5px;
font-size:10px;
}
.menu2 input {
max-width:150px;
font-size:10px;
}
}
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo">
<font color="black" id="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder=" Quick Search for any city or street in Japan" style="border: none;"/>
</div>
Notice: This isn't the best practice. but for more efficient you have to use any grid system or framework like bootstrap, foundation or uikit.
I think you should check for media rules to get full responsiveness in any width/height you want.
Okay, so, I honestly don't know what I'm doing wrong. So let me just show you:
This is what I'm trying to accomplish (made in PS):
http://puu.sh/ryXC9/7d82671ee0.png
What my results are so far:
http://puu.sh/ryXST/02c9722a53.png (Obviously not successful, and as a side note, the orange box is just a placeholder, I'll fill out the form later).
The problem I'm having is first: Trying to have the width of "social-content" to be just the width and height of the held contents. Of course "main-social" is just the width of screen and height of contents. If I can accomplish the width thing with "social-content" then I'll be able to center the div with "Margin: 0 auto" but alas, I cannot figure out my dilemma. This is my relavent markup( "Follow us" bar is excluded, as its irrelevant):
.fa-facebook {
color: white;
overflow: hidden;
}
.fa-twitter {
color: white;
padding: 0.2em;
}
#main-social {
height: 8em;
}
#social-content {
height: 100%;
width: 70%;
margin: 0 auto;
margin-top: 1.4em;
}
#facebook {
float: left;
display: inline-block;
}
#facebook a {
padding: 0.2em 0.4em 0.2em 0.4em;
background-color: #3b5998;
height: 100%;
text-decoration: none;
}
#facebook a:hover {
color: white;
}
#twitter {
float: left;
display: inline-block;
}
#twitter a {
background-color: #10bbe6;
text-decoration: none;
}
#twitter a:hover {
color: white;
}
#emailForm {
float:left;
display: inline-block;
width: 25em;
margin: 0 auto;
background-color: orange;
height: 7em;
}
<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
<div id="social-content">
<div id="facebook">
</div>
<div id="emailForm">
</div>
<div id="twitter">
<a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
</div>
</div>
</div>
Also, the problem also is, It needs to be responsive, the entire site is responsive, and since I'm still new to the responsive scene, I may have not taken the best approaches to it. (Tips not needed, but greatly appreciated :) )
To get #social-content's width to be that of its content, use display: inline-block without a width defined.
If #main-social is simply a container, you can use flexbo to center #social-content within it. Add the following to #main-social:
#main-social {
display: flex;
justify-content: center; // Centers horizontally
align-items: center; // If you need to center vertically, as well
}
I'd like to create simple responsive website containing a showcase of pictures. By myself, but if there's a template, no problem. But I want to learn it anyway.
Requirements:
images with one width no matter the browser width
images always in the middle of the page (0 auto)
number of columns - images changing with the browser width
no height limitation of the image. only fixed width (+ keep aspect ratio).
perfect example: www.kristianhammerstad.com - try to resize the window, I'd like to achieve exactly this. Works also on mobile browser (shows image after image)
I'd prefer without JS, only media queries - possible?
Here's what I have so far:
* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
body { font: normal 14px Helvetica, Arial, sans-serif; line-height: 30px; color: #333; }
.left { float: left; }
.right { float: right; }
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
hr {
margin: 0;
border: 0;
width: auto;
border-top: 1px solid #aaaaaa;
opacity: .25;
margin: 0 auto;
}
h1 {
letter-spacing: 2px;
font-weight: 300;
text-align: center;
font-size: 2em;
line-height: 1.3em;
color: #333;
}
h2 {
letter-spacing: 1px;
font-weight: 300;
text-align: center;
font-size: 1em;
margin-bottom: 60px;
color: #666;
text-transform: uppercase;
}
/* ---------------------------------------------------------- */
.wrapper {
width: 950px; margin: 0 auto;
}
#name {
margin-top: 50px;
}
/* ---------------------------------------------------------- */
#works {
margin-top: 50px;
}
#works h2 {
font-family: Helvetica, Arial, sans-serif;
letter-spacing: 1px;
font-weight: 300;
text-align: left;
font-size: 1.3em;
margin-bottom: 10px;
color: #666;
text-transform: none;
}
#work-one {
display: block;
width: 460px;
height: 500px;
margin-right: 30px;
margin-bottom: 30px;
}
#work-two {
display: block;
width: 460px;
height: 300px;
}
#work-three {
display: block;
width: 460px;
height: 700px;
margin-bottom: 30px;
}
#work-four {
display: block;
width: 460px;
height: 200px;
}
/* ---------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 1024px) {
/* I am not sure about break points */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
/* I am not sure about content here */
}
<div class="wrapper">
<div id="name">
<h1>IMAGES</h1>
<h2>showcase</h2>
</div>
<div id="works">
<div class="left">
<a id="work-one" href="#"><img src="http://placehold.it/460x500?text=Placeholder" ></a>
<a id="work-two" href="#"><img src="http://placehold.it/460x300?text=Placeholder" ></a>
</div>
<div class="right">
<a id="work-three" href="#"><img src="http://placehold.it/460x700?text=Placeholder" ></a>
<a id="work-four" href="#"><img src="http://placehold.it/460x200?text=Placeholder" ></a>
</div>
</div><div class="clearfix"></div>
</div>
First of all it would recommend using a grid system. One common known and used would be bootstrap.
With it you can easily set your wanted layout.
Second, to achieve this "repositioning" effect, you would need a JS library called masonry. It hooks itself in the resize event as well as initially on initialization of the dom.
There it calculates the width of the container wrapping all images and the width of the images, calculates the new positions using complex algorithms, and reposition them using the animation effect you see.
Maybe this tutorial (with source) will help you further: http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/
I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>